其他选择更改时,选择显示选项的角度最佳实践

时间:2015-03-08 21:53:40

标签: javascript json angularjs

我试图构建一个选择框,以有角度的方式触发其他选择选项的显示。

我使用构建选择框的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 aschool 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最佳实践

0 个答案:

没有答案