如何使用angular ui select过滤两个字段中的数据

Question

我有一个angular应用程序，使用ui select，页面上有两个带有多选择器的输入字段，这两个字段都是下拉列表。一切都很好。当我在第一个字段（在这种情况下是编程语言）中选择一个选项时，第二个字段（属于特定编程语言的框架）必须被过滤，并且只显示正确框架的列表。

工作代码：

<div class="col-md-2 col-md-offset-2">
                    <ui-select  multiple ng-model="newdeveloper.langs">
                        <ui-select-match placeholder="Select skills">[[ $item.lang_name ]]</ui-select-match>
                        <ui-select-choices repeat="item in (allSkillList.langs | filter: $select.search) track by item.id">
                            <span ng-bind="item.lang_name"></span>
                        </ui-select-choices>
                    </ui-select>
                </div>
                <div class="col-md-2">
                    <ui-select  multiple ng-model="newdeveloper.frameworks">
                        <ui-select-match placeholder="Select frame">[[ $item.frame_name ]]</ui-select-match>
                        <ui-select-choices repeat="item in (allSkillList.frameworks | filter: $select.search) track by item.id">
                            <span ng-bind="item.frame_name"></span>
                        </ui-select-choices>
                    </ui-select>
                </div>

带有数据的JSON：

{
"frameworks": [
    {
        "id": 1,
        "frame_name": "Django",
        "frame_lang": 1
    },
    {
        "id": 2,
        "frame_name": "jQuery",
        "frame_lang": 2
    },
    {
        "id": 3,
        "frame_name": "Spring",
        "frame_lang": 3
    }
],
 "langs": [
    {
        "id": 1,
        "lang_name": "Python"
    },
    {
        "id": 2,
        "lang_name": "JavaScript"
    },
    {
        "id": 3,
        "lang_name": "Java"
    },
 ]

}

"frameworks.frame_lang"；必须与"；langs.id"；以便使过滤器正常工作。

问题：

我该如何解决这个问题？我应该使用一些自定义过滤器吗？

谢谢！

Answer 1

您必须创建一个自定义过滤器filterByLang，然后将其重复应用于框架。

angular.module('demoApp').filter('filterByLang',function(){
    return function(frameworks,langs){
        var filtered = [];
        if(langs && langs.length){
            angular.forEach(frameworks,function(framework){
                angular.forEach(langs,function(lang){
                    if(framework.frame_lang == lang){
                        filtered.push(framework);
                    }
                })    
            });
        }
        return filtered;
    };
});

Inside html通过.更新您的第二个下拉代码

<ui-select-choices repeat="item in (allSkillList.frameworks | filterByLang: newdeveloper.langs | filter: $select.search) track by item.id">