javascript - 如何使用 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;
    };
});

在 html 中更新您的第二个下拉列表代码。

...

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

...