私はAngular JSが初めてです。私がやろうとしているのは、ディレクティブを使用して再利用可能なコンポーネントを作成することです。現在のところ、ドロップダウンは 1 つだけです。Add を実行している間、ドロップダウンには permissionValues 配列の値が取り込まれ、選択された値を持つ空のモデルとのバインディングが行われます。しかし、編集しようとすると、ドロップダウンが既存のモデル値で初期化されません。ディレクティブ コード。
directive('userPermissions', function() {
return {
restrict: 'E',
template:'<div><select ng-model="ngModel" ng-options="abc [optValue] as abc [optDescription] for abc in array"></select>{{tab}}</div>',
replace: true,
transclude: true,
scope:{ ngModel: '=', tab:'='},
link: function (scope, element, attrs) {
scope.optValue = attrs.optValue;
scope.optDescription = attrs.optDescription;
scope.$watch(attrs.array, function(newVal, oldVal){
if(newVal != oldVal){
scope.array = newVal;
}
});
}
};
});
HTMLコード
<user-permissions tab="tab"
ng-model="newUser.canCheckout1"
array="permissionValues"
opt-value="value"
opt-description="label"></user-permissions>
メインコントローラーで
$scope.permissionValues = [{label:'Standard', value:'true'},{label:'Restricted', value:'false'}];
ご覧のとおり、テスト用に「タブ」を追加しました。[編集] をクリックすると呼び出されるロード機能のタブの値を変更しています。タブの新しい値が出力されていますが、ドロップダウンが初期化されていません。