web-dev-qa-db-ja.com

AngularJs-SELECTのngモデル

JSfiddle

問題：

ページにSELECT要素があり、ng-repeatで埋められています。また、デフォルト値を持つ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
        }

};
javascriptjqueryangularjsangular-ngmodel
52
Jordumus

オプション要素で ng-selected ディレクティブを使用できます。真実が選択されたプロパティを設定するという表現を取ります。

この場合：

<option ng-selected="data.unit == item.id" 
        ng-repeat="item in units" 
        ng-value="item.id">{{item.label}}</option>

デモ

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

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

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
    <select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
         <option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
    </select>
</div>
66
Patrick Evans

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

コントローラーで：

 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>

作業フィドル

16
carton

オプションタグを定義する必要はありません。ngOptionsディレクティブを使用してこれを行うことができます。 https://docs.angularjs.org/api/ng/directive/ngOptions

<select class="form-control" ng-change="unitChanged()" ng-model="data.unit" ng-options="unit.id as unit.label for unit in units"></select>
6
Numyx

ただし、ngOptionsには、繰り返されるインスタンスごとに新しいスコープを作成しないことにより、メモリの削減や速度の向上などの利点があります。 角度付きドキュメント

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

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

jsfiddle を参照してください

3
Aleksey Kiyanov

また、以下のようにng-repeatからデフォルト値を選択してアイテムを置くこともできます：

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

値の属性を忘れないでください。空白のままにすると、同じ問題が発生します。

2
Ze Rubeus

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

参照については、このプランカーをご覧ください。

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

1
Alhuck A