[英]How to set default value in ng-options
我可以在 angularjs 中设置一个具有默认值的下拉列表,
<select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id">
<option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option>
</select>
如何使用ng-options
实现相同的目标? 我与,
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = option.id"
ng-options="option.name for option in data track by option.id">
</select>
但是没有用。 小提琴样本在这里
使用ng-init
设置ng-options
默认值。
这是:演示
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0].id"
ng-options="option.id as option.name for option in data">
</select>
所有这些都错过了ng-init
的使用。
从角度文档:
可以滥用该指令在模板中添加不必要的逻辑量。 ngInit 只有少数合适的用途,例如用于别名 ngRepeat 的特殊属性,如下面的演示所示; 以及通过服务器端脚本注入数据。 除了这几种情况,您应该使用控制器而不是 ngInit 来初始化作用域上的值。
在我看来,设置默认值的正确方法是简单地使用从ng-options
中选择的值预先填充ng-model
属性,剩下的就是 Angular 了。
本质上,当您定义$scope
属性时,您的选择将绑定以为它分配data
数组中的默认值。 如果您的data
数组来自 ajax 请求,只需在获得data
后分配它。
.controller('test', ['$scope', function ($scope) {
$scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}];
$scope.repeatSelect= $scope.data[0];
}]);
有一个警告需要注意。 如果您在表达式中使用as
关键字,则必须为您的ng-model
分配您告诉它选择的实际属性。
查看完整的小提琴演示:http: //jsfiddle.net/kb99gee8/
我已经使用你提到的代码和ng-options
实现了你需要的东西,这里是Working Fiddle
完整代码
<div ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect">Angular select:</label>
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0]"
ng-options="option.name for option in data track by option.id">
</select>
</form>
<br/> <tt>Selected value: {{repeatSelect.id}}</tt>
</div>
</div>
<br/>
我将建议一个示例 HTML 部分
<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists" ng-change="getmediationRooms(data.selectedOption)"></select>
在我的控制器中
$scope.data = {selectedOption: $scope.venueNamelists[i].name};
模型值应等于场地名称列表中的键值对。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.