AngularJs - SELECT 中的 ng-model

Posted 2023-02-19

【中文标题】AngularJs - SELECT 中的 ng-model

【英文标题】：AngularJs - ng-model in a SELECT

【发布时间】：2015-07-14 22:18:13

【问题描述】：

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
        

;

【参考方案1】：

您可以在选项元素上使用ng-selected 指令。它需要表达式 if truthy 将设置选定的属性。

在这种情况下：

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

【讨论】：

这完成了工作：其他答案很有帮助，但我无法更改数据格式，因为它们也用于其他地方和其他情况。这解决了问题而不会弄乱其他数据。

ngSelected 的角度文档说它不应该与 ngModel 一起使用。

【参考方案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>

Working Fiddle

【讨论】：

这是一个不错的解决方案，但在我的情况下它对我没有帮助，因为我无法更改数据的格式。我确实复制了 sn-p 以供将来在其他情况下使用！

如何在带有数据绑定的 html 中显示选择了哪个选项？

@StephenKuehl 您必须使用您想要的选定值设置您的模型（传递给 ngModel 的变量）。

【参考方案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>

【讨论】：

这个解决方案令人讨厌的部分是 ng-model 将目标设置为您在 ng-options 中重复的内容。无法设置重复的字段（例如 id）。

【参考方案4】：

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

替代解决方案是使用ng-init 指令。您可以指定将初始化默认数据的函数。

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

见jsfiddle

【参考方案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>

不要忘记值属性，如果你把它留空，你会遇到同样的问题。

【参考方案6】：

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

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

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