[英]How to iterate through an array inside object in “ng-options” attribute?
[
...
{
"surname":"Williams"
"name":['Holly','James','Robert','Kim']
},
{
"surname":"Jones"
"name":['Holly','Joe','Jon','Harry']
}
...
]
如果我有2个下拉菜单。 第二个依赖于第一个。
第一个下拉列表中填有姓氏。
<select ng-model="surnameSelect" ng-options="person.surname as person.surname for person in persons"> <option value="" ng-if="!surnameSelect"></option> </select>
现在基于选定的“姓氏”,我想用姓氏与所选姓氏匹配的对象中数组中的值填充第二个下拉列表。
我的问题是这个。 我如何找到该数组以及如何使用angularJS中的ng-options遍历该数组?
最好的祝福
如果您可以将一天的结构重组为一个对象,而名称是键,名称列表是值,那么您可以轻松实现。
重组:
$scope.data = persons.reduce(function(p, c) {
if (!p.hasOwnProperty(c.surname)) {
p[c.surname] = p.name;
}
return p;
}, {});
并使用新结构:
<select ng-model="selectedSurname" ng-options="surname as surname for (surname, names) in data"></select>
<select ng-model="selectedName" ng-options="name as name for name in data[selectedSurname]"></select>
这是Plunker的可能解决方案:对surname select
执行ng-change="populate()"
。
<select ng-change="populate()" ng-model="surnameSelect" ng-options="person.surname as person.surname for person in persons"></select>
<select ng-model="nameSelect" ng-options="name as name for name in currentNames"></select>
参见plunker中的完整实现。
$scope.populate = function(){
var currentPerson = $scope.persons.filter(function( person ) {
return person.surname == $scope.surnameSelect;
});
$scope.currentNames = currentPerson[0].name;
$scope.nameSelect = $scope.currentNames[0];
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.