我试图构建一个选择框,以有角度的方式触发其他选择选项的显示。
我使用构建选择框的json是
[
{"item_id":1,"item":"rubber","type":"x","facility":"school a"},
{"item_id":2,"item":"pen","type":"x","facility":"school b"},
{"item_id":3,"item":"book","type":"y","facility":"school b"},
]
我需要的是3个选择框,第一个显示所有唯一type
。在json之上,将是' x,y'。
当用户选择其中一个时,它应该在其他选择框中显示与所选类型相同的所有unqiue facility
值。
- 如果用户选择了x,则会显示school a
和school b
当用户选择工具时,第三个选择框将所有uiqiue item
显示为标签,将item_id显示为设施=所选设施的值
<select ng-model="selected.type">
<!-- need to show unique types here -->
</select>
<select ng-model="selected.facility">
<option ng-repeat="s in json" ng-if='selected.type == s.type'>{{s.item}}</option>
</select>
<select ng-model="selected.item">
<option ng-repeat="s in json" ng-if='selected.facility == s.facility'>{{s.item}}</option>
</select>
目前我正在做的是我写了一个过滤器
.filter('unique', function() {
return function (arr, field) {
var r = [],final=[];
for(i in arr){
if(r.indexOf(arr[i][field]) == -1){
r.push(arr[i][field]);
final.push(arr[i]);
}
}
return final;
};
})
并且正在做
<select class="form-control" ng-model="nrequest.facility">
<option ng-repeat="s in facility_services |unique:'facility'" value="{{s.facility}}">{{s.facility}}</option>
</select>
<select class="form-control" ng-model="nrequest.item">
<option ng-repeat="s in facility_services" ng-if='s.facility == nrequest.facility'>{{s.item}}</option>
</select>
它有效但我不确定这是否是正确的方式来做角度方式,因为我还在学习这个新玩具我希望有关如何使用ngoptions实现这个目标的一些指示,或者其他angularjs最佳实践