AngularJs - SELECT 中的 ng-model [英] AngularJs - ng-model in a SELECT
本文介绍了AngularJs - SELECT 中的 ng-model的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问题:
我的页面中有一个 SELECT 元素,其中填充了 ng-repeat
.它还有一个具有默认值的 ng-model
.
当我更改值时,ng-model
会适应,没关系.但是下拉列表在启动时显示一个空槽,它应该选择具有默认值的项目.
代码
<select class="form-control" ng-change="unitChanged()" ng-model="data.unit"><option ng-repeat="item in unit" ng-value="item.id">{{item.label}}</option></选择>
使用JS:
function myCtrl ($scope) {$scope.units = [{'id': 10, 'label': 'test1'},{'id':27,'标签':'test2'},{'id':39,'标签':'test3'},]$scope.data = {'id': 1,单位":27}};
解决方案
您可以使用ng-selected 选项元素上的指令.需要表达的是 if truthy 将设置 selected 属性.
在这种情况下:
演示
angular.module("app",[]).controller("myCtrl",function($scope) {$scope.units = [{'id': 10, 'label': 'test1'},{'id':27,'标签':'test2'},{'id':39,'标签':'test3'},]$scope.data = {'id': 1,单位":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></选择>
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.
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.
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:
function myCtrl ($scope) {
$scope.units = [
{'id': 10, 'label': 'test1'},
{'id': 27, 'label': 'test2'},
{'id': 39, 'label': 'test3'},
]
$scope.data = {
'id': 1,
'unit': 27
}
};
解决方案
You can use the ng-selected directive on the option elements. It takes expression that if truthy will set the selected property.
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>
这篇关于AngularJs - SELECT 中的 ng-model的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文