2017-09-01 11 views
1

ng-optionsで現在選択されているオプションの値を更新しようとする際に、いくつか問題があります。
私は1つのオブジェクトを含む配列を持っています。オブジェクトには値が一定の '値'と '名前'のプロパティがあります。
この定数配列は、selectおよびng-optionsを持つカスタムディレクティブで使用しています。これは、ディレクティブのhtmlの一部です:ng-optionsの選択されたオプション値をコントローラのオブジェクトの値にバインドする方法はありますか?

<select 
    name="{{vm.name}}" 
    ng-model="vm.model" 
    ng-options="arrayObject.value as arrayObject.name for arrayObject in 
    vm.constantArrayofObject"> 
</select> 

そしてこの指示文をビューの形式で使用します。コントローラのビューで

<directive 
    model="" 
    form="someForm" 
    name="someName"> 
    </directive> 

Iは、プロパティとしてオブジェクトの配列を持つオブジェクト「controllerObject」を有するこのような:

controllerObject.properties: [ 
    { 
    value: "someValue", 
    name: "someName" 
    } 
] 

I値及び選択されたの名前を結合しなければなりませんオプションを使用して、controllerObject.properties配列内のオブジェクトの値と名前を指定し、それらをupdate()関数に渡します。しかし、私はどのように指示にhtmlのビューでコントローラオブジェクトにアクセスするか分からない。これは、すでにオブジェクトの値を定数配列に表示しているためです。だからこそ、私は指示のモデルプロパティに何も置かなかったのです。オブジェクトの2つの配列を接続し、選択した値をコントローラ内のオブジェクトの値(および名前)にマップする方法はありますか?
ご協力いただければ幸いです。

答えて

1

オプションスコープを使用して2つの方法でデータバインディング "="演算子を共有します。そのためには、controllerObject.properties配列を持つselect-options属性が1つだけあります。そしてそれを指令のスコープブロックの中に入れてください。だから、使用されるディレクティブは指定できます

<mydirective field="fielddata" select-options="controllerObject.properties"></mydirective> 

DDO:

<select 
    name="{{field.name}}" 
    ng-model="field.model" 
    ng-options="arrayObject.value as arrayObject.name for arrayObject in selectOptions"> 
</select> 

とビューコントローラにようfielddata & controllerObjectを定義します:

dirtemplate.htmlがある
app.directive('mydirective', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'dirtemplate.html', 
    scope: { 
     field: "=", 
     selectOptions: "=" 
    }, 
    link: function(scope, element, attrs) { 

    } 
    }; 
}); 

app.controller('MainCtrl', function($scope) { 
    $scope.fielddata = { 
    name: "country", 
    form: "someForm", 
    model: "" 
    }; 
    $scope.controllerObject = {}; 
    $scope.controllerObject.properties = [ 
    { 
    value: "someValue", 
    name: "someName" 
    }, 
    { 
    value: "Value1", 
    name: "Name1" 
    }, 
    { 
    value: "Value2", 
    name: "Name2" 
    } 
    ]; 
}); 

Working plunker

+0

ありがとうございました!それが私の問題を解決しました! – Julsy

+0

@喜んでそれは助け:) – Shantanu

関連する問題