[英]Select default value with condition in ng-options
I have an angular app with the following array: 我有一个带有以下数组的角度应用程序:
countries = [{"code": "ZA", "name": "South Africa"}, {"code": "CH", "name": "Switzerland"}]
with a Jade select as follow: 与玉选择如下:
select(ng-model='myCountry', ng-options='country.name for country in countries')
What I would like to do is to pre-select a country based on the code for example: 我想做的是根据代码预先选择一个国家,例如:
select(ng-model='myCountry', ng-options='country.name for country in countries', ng-selected='country.code=="CH"')
Obviously, this solution doesn't work as ng-selected is not intended to be used in a select but in an option tag. 显然,此解决方案无法正常工作,因为ng-selected并不打算在select中使用,而是在option标签中使用。
It is important for me to use a conditional selection and not a default index value like in the angularJS example . 对于我来说,重要的是使用条件选择而不是像angularJS示例中那样使用默认索引值。
That is what ng-model is for. 那就是ng-model的目的。 I suggest you initialize myCountry in a controller.
我建议您在控制器中初始化myCountry。 Note that myCountry should ideally have the same format as countries (eg:
{"code": "ZA", "name": "South Africa"}
). 请注意,理想情况下,myCountry应该与国家/地区具有相同的格式(例如:
{"code": "ZA", "name": "South Africa"}
)。
Edit: I am adding an example from my own project: 编辑:我要从我自己的项目中添加一个示例:
<select class="small" data-ng-change="goToTask(current_task.id)" data-ng-model="current_task" data-ng-options="task.name for task in tasks track by task.id"></select>
In Controller: 在控制器中:
$scope.current_task = { id: $scope.myService.getCurrentTaskId() };
What is important here is that current_task is at minimum a hash containing the id
key. 这里重要的是current_task至少是包含
id
键的哈希。
Edit2: I was thinking about the sorting problem with the track by. Edit2:我正在考虑跟踪依据的排序问题。 I think you can use
select
instead, eg: `ng-options="select country.code as country.name for country in countries". 我认为您可以使用
select
代替,例如:“ ng-options =“选择country.code作为国家/地区中国家/地区的国家/地区名称”。 I haven't tried it but from the angular docs, it should work. 我没有尝试过,但是从有角度的文档中,它应该可以工作。
From your sample above it looks like you should do this in your controller: 从上面的示例中,您似乎应该在控制器中执行此操作:
$scope.myCountry = $scope.countries.filter(function(c){ return c.code==="CH"})[0];
Like this: 像这样:
<script>
function MyCntrl($scope) {
$scope.countries = [{"code": "ZA", "name": "South Africa"}, {"code": "CH", "name": "Switzerland"}];
$scope.myCountry = $scope.countries.filter(function(c){ return c.code==="CH"})[0];
}
</script>
Or you could try building the select with and ngRepeat
which seems to be closer to what you need, like this: 或者,您也可以尝试使用
ngRepeat
和ngRepeat
构建选择,这似乎更接近您的需求,例如:
<body ng-app="">
<script>
function MyCntrl($scope) {
$scope.countries = [{"code": "ZA", "name": "South Africa"}, {"code": "CH", "name": "Switzerland"}];
}
</script>
<div ng-controller="MyCntrl">
<select ng-model="myCountry" >
<option ng-selected="c.code=='CH'" ng-repeat="c in countries">{{c.name}}</option>
</select><br>
{{myCountry |json}}
</body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.