JSfiddle
Problem:
问题:
I have a SELECT-element in my page, which is filled in with an ng-repeat
. It also has a ng-model
which has a default value.
我的页面中有一个SELECT-element,其中填充了一个ng-repeat。它还拥有一个具有默认值的ng模型。
When I change the value, the ng-model
adapts, 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
}
};
6 个解决方案
#1
59
You can use the ng-selected directive on the option elements. It takes expression that if truthy will set the selected property.
您可以在选项元素上使用ng选择的指令。如果truthy将设置所选属性,则需要表达式。
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>
#2
15
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>
工作小提琴
#3
6
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>
#4
3
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-init
directive. 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
看到jsfiddle
#5
2
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 atribute如果你把它留空,你也会遇到同样的问题。
#6
1
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-model in HTML's select tag.
Select的默认值应该是列表中它的值之一。为了使用默认值加载select,可以使用ng选项。需要在控制器中设置一个范围变量,该变量在HTML的select标记中被分配为ng-model。
View this plunker for any references:
查看此柱塞是否有参考:
http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview
http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview
#1
59
You can use the ng-selected directive on the option elements. It takes expression that if truthy will set the selected property.
您可以在选项元素上使用ng选择的指令。如果truthy将设置所选属性,则需要表达式。
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>
#2
15
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>
工作小提琴
#3
6
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>
#4
3
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-init
directive. 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
看到jsfiddle
#5
2
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 atribute如果你把它留空,你也会遇到同样的问题。
#6
1
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-model in HTML's select tag.
Select的默认值应该是列表中它的值之一。为了使用默认值加载select,可以使用ng选项。需要在控制器中设置一个范围变量,该变量在HTML的select标记中被分配为ng-model。
View this plunker for any references:
查看此柱塞是否有参考:
http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview
http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview