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

Question

I have an angular app and using ui-select, on the page there two input fields with multiselectors, both of them dropdown lists. Everything works fine. When I choose an option in first field (in this case its programming language) the second field (frameworks that belongs to particular programming language) must be filtrated and show only list of correct frameworks.

WORKING CODE:

<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 WITH DATA:

{
"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" must match with "langs.id" in order to make filter work properly.

THE QUESTIONS :

How can I resolve this problem? Should I use some custom filter?

Thank you!

Answer 1

You have to create a custom filter filterByLang and then apply it to frameworks repeat.

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 update your second dropdown code by.

...

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

...