Javascript AngularJs-ng选择模型

问题：

我的页面中有一个SELECT元素，该元素用

ng repeat

填充。它还有一个具有默认值的

ng模型

当我更改该值时，

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>

---

请尝试以下代码：

在控制器中：

 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>

您可以对选项元素使用指令。它采用表达式if truthy将设置所选属性

在这种情况下：

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

{{item.label}

选择的默认值应该是列表中的一个值。要加载带有默认值的选择，您可以使用ng选项。需要在控制器中设置一个范围变量，该变量在HTML的select标记中被指定为ng model

查看此plunker以获取任何参考：

---

您不需要定义选项标签，可以使用ngOptions指令执行此操作：

但是，ngOptions提供了一些好处，例如通过不为每个重复实例创建新的作用域来减少内存和提高速度

另一种解决方案是使用

ng init

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

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

---

请参见

您还可以将从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>

默认值
{{item.label}

---

不要忘记值A，但如果保留为空，您也会遇到同样的问题。

这就解决了问题：其他答案很有用，但我无法更改数据格式，因为它们在其他地方和其他情况下也会使用。这解决了问题，而没有弄乱其他数据。的angular docs表示，它不应该与

ngModel

一起使用。这是一个很好的解决方案，但对我的情况没有帮助，因为我无法更改数据的格式。我确实复制了这个片段，以便将来在其他情况下使用！如何在HTML数据绑定中显示已选择的选项？@StephenKuehl您必须使用所需的选定值设置您的模型（传递给ngModel的var）。此解决方案令人恼火的部分是，ng模型将目标设置为您在ng选项中重复的内容。无法设置重复内容的字段（例如id）。

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

<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>