9

ディレクティブを使用してオプションを事前入力したい select タグ (国の選択に使用) があります。

<select class="countryselect" required ng-model="cust.country"></select>

私のディレクティブは次のようになります

return {
  restrict : "C",
  link: function postLink(scope, iElement, iAttrs) {
     var countries = [
        ["AND","AD - Andorra","AD"],
        ["UAE","AE - Vereinigte Arabische Emirate","AE"]
        ... //loop array and generate opt elements
        iElement.context.appendChild(opt);
    }
  }

追加のオプションで選択を埋めることはできますが、ng-model バインディングは機能しません。cust.country に値 (「UAE」など) がある場合でも、このオプションは選択されません。

cust.country の値を選択して表示するにはどうすればよいですか? ここでタイミングの問題があると思われる場合。

4

2 に答える 2

13

Angular JS のディレクティブを使用できます。

マークアップ:

<div ng-controller="MainCtrl">
<select ng-model="country" ng-options="c.name for c in countries"></select>
{{country}}
</div>

脚本：

app.controller('MainCtrl', function($scope) { 
   $scope.countries = [
    {name:'Vereinigte Arabische Emirate', value:'AE'},
    {name:'Andorra', value:'AD'},
  ];

  $scope.country = $scope.countries[1]; 

});

select のドキュメントを確認してください: Angular Select

指令で編集

指令：

  app.directive('sel', function () {
    return {
        template: '<select ng-model="selectedValue" ng-options="c.name for c in countries"></select>',
        restrict: 'E',
        scope: {
            selectedValue: '='
        },
        link: function (scope, elem, attrs) {
            scope.countries = [{
                name: 'Vereinigte Arabische Emirate',
                value: 'AE'
            }, {
                name: 'Andorra',
                value: 'AD'
            }, ];
            scope.selectedValue = scope.countries[1];
        }
    };
});

メインコントローラー:

app.controller('MainCtrl', function($scope) {

  $scope.country={};

})

マークアップ:

<div ng-controller="MainCtrl">
<sel selected-value="country"></sel>
{{country}}
</div>

作業例:例

于 2013-08-27T08:19:19.787 に答える