Как я могу фильтровать данные в двух полях, используя угловой пользовательский интерфейс?

У меня есть угловое приложение и с помощью 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, чтобы фильтр работал правильно.

ВОПРОСЫ:

Как я могу решить эту проблему? Должен ли я использовать какой-то пользовательский фильтр?

Благодарю вас!


javascript angularjs ui-select
person Bogdan Akrybai    schedule 30.03.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны создать собственный фильтр 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">

...

person Ankit Pundhir    schedule 30.03.2016
comment
Это работает блестяще, большое спасибо за вашу помощь. - person Bogdan Akrybai; 30.03.2016