AngularJs - SELECT 中的 ng-model

Question

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
        }

};

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>

Answer 2

尝试以下代码：

在您的控制器中：

 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>

工作小提琴

Answer 3

您不需要定义选项标签，您可以使用 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>

Answer 4

但是，ngOptions 提供了一些好处，例如通过不为每个重复实例创建新范围来减少内存和提高速度。 角度文档

替代解决方案是使用

ng-init

指令。您可以指定将初始化默认数据的函数。

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

参见jsfiddle

Answer 5

您还可以将具有默认值的项目从 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>

不要忘记价值属性，如果将其留空，您也会遇到同样的问题。

Answer 6

Select 的默认值应该是其在列表中的值之一。为了使用默认值加载选择，您可以使用ng-options。需要在控制器中设置作用域变量，并且该变量在 HTML 的 select 标记中指定为 ng-model。

查看此插件以获取任何参考：

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