How can I filter data in two fields using 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!

Ankit Pundhir · Accepted Answer · 2016-03-30 11:50:18Z

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">

...

edited Mar 30, 2016 at 11:50

answered Mar 30, 2016 at 11:37

Ankit Pundhir

1,0978 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bogdan Akrybai Over a year ago

It works brilliant, thank you so much for your help.

Collectives™ on Stack Overflow

How can I filter data in two fields using angular ui-select?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related