Javascript AngularJs - SELECT 中的 ng-model
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30048605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs - ng-model in a SELECT
提问by Jordumus
Problem:
问题：
I have a SELECT-element in my page, which is filled in with an ng-repeat. It also has a ng-modelwhich has a default value.
我的页面中有一个 SELECT 元素，其中填充了ng-repeat. 它还具有ng-model具有默认值的 a。
When I change the value, the ng-modeladapts, that's ok. But the dropdown-list shows an empty slot at launch, where it should have the item with the default value selected instead.
当我改变值时，ng-model适应，那没关系。但是下拉列表在启动时显示一个空槽，它应该选择具有默认值的项目。
Code
代码
<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>
With JS:
与JS：
function myCtrl ($scope) {
$scope.units = [
{'id': 10, 'label': 'test1'},
{'id': 27, 'label': 'test2'},
{'id': 39, 'label': 'test3'},
]
$scope.data = {
'id': 1,
'unit': 27
}
};
回答by Patrick Evans
You can use the ng-selecteddirective on the option elements. It takes expression that if truthy will set the selected property.
您可以在选项元素上使用ng-selected指令。需要表达的是 if truthy 将设置 selected 属性。
In this case:
在这种情况下：
<option ng-selected="data.unit == item.id"
ng-repeat="item in units"
ng-value="item.id">{{item.label}}</option>
Demo
演示
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>回答by carton
try the following code :
尝试以下代码：
In your controller :
在您的控制器中：
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"
};
In your page :
在您的页面中：
<select ng-model="data" ng-options="opt as opt.label for opt in units ">
</select>
回答by Numyx
You dont need to define option tags, you can do this using the ngOptions directive: https://docs.angularjs.org/api/ng/directive/ngOptions
你不需要定义选项标签，你可以使用 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>
回答by Aleksey Kiyanov
However, ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance. angular docs
但是，ngOptions 提供了一些好处，例如通过不为每个重复实例创建新范围来减少内存和提高速度。角度文档
Alternative solution is use ng-initdirective. You can specify function that will be initialize your default data.
替代解决方案是使用ng-init指令。您可以指定将初始化默认数据的函数。
$scope.init = function(){
angular.forEach($scope.units, function(item){
if(item.id === $scope.data.unit){
$scope.data.unit = item;
}
});
}
See jsfiddle
回答by ZEE
You can also put the item with the default value selected out of the ng-repeat like follow :
您还可以使用从 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>
and don't forget the value atribute if you leave it blank you will have the same issue.
并且不要忘记 value 属性，如果您将其留空，您将遇到同样的问题。
回答by Alhuck A
Select's default value should be one of its value in the list. In order to load the select with default value you can use ng-options. A scope variable need to be set in the controller and that variable is assigned as ng-modelin HTML's select tag.
Select 的默认值应该是它在列表中的值之一。为了使用默认值加载选择，您可以使用ng-options。需要在控制器中设置范围变量，并且该变量在 HTML 的 select 标签中被指定为ng-model。
View this plunker for any references:
查看此 plunker 以获取任何参考：
