AngularJs-SELECT中的ng模型

Question

JS小提琴

问题：

我的页面中有一个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
        }

};

Answer 1

您可以在选项元素上使用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>