javascript - ng-options 空白 - AngularJs - SELECTのモデル




3 Answers

次のコードを試してください:

あなたのコントローラーで:

 function myCtrl ($scope) {
      $scope.units = [
         {'id': 10, 'label': 'test1'},
         {'id': 27, 'label': 'test2'},
         {'id': 39, 'label': 'test3'},
      ];

   $scope.data= $scope.units[0]; // Set by default the value "test1"
 };

あなたのページ:

 <select ng-model="data" ng-options="opt as opt.label for opt in units ">
                </select>

働くフィドル

angularjs select 取得

JSfiddle

問題:

私は、 ng-repeat埋められている私のページにSELECT要素を持っています。 また、既定値を持つng-modelもあります。

値を変更すると、 ng-model適応します。これは問題ありません。 しかし、ドロップダウンリストには、起動時に空のスロットが表示されます。代わりに、デフォルト値の項目が選択されている必要があります。

コード

<div ng-app ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
         <option ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>

JSの場合:

function myCtrl ($scope) {
    $scope.units = [
        {'id': 10, 'label': 'test1'},
        {'id': 27, 'label': 'test2'},
        {'id': 39, 'label': 'test3'},
    ]

        $scope.data = {
        'id': 1,
        'unit': 27
        }

};



ただし、ngOptionsでは、繰り返されるインスタンスごとに新しいスコープを作成しないことでメモリを節約し、速度を向上させるなどの利点があります。 https://docs.angularjs.org/api/ng/directive/ngOptions

別の解決策は、use ng-initディレクティブです。 デフォルトデータを初期化する関数を指定することができます。

$scope.init = function(){
            angular.forEach($scope.units, function(item){
                if(item.id === $scope.data.unit){
                    $scope.data.unit = item;
                }
            });
        } 

jsfiddle参照してください




Selectのデフォルト値は、リスト内の値の1つでなければなりません。 selectをデフォルト値でロードするには、 ng-optionsを使用します 。 スコープ変数はコントローラに設定する必要があり、その変数はHTMLのselectタグでng-modelとして割り当てられます。

任意の参照については、このplunkerを参照してください:

http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview




Related