角度ui-selectを使用して2つのフィールドのデータをフィルタリングする方法はありますか？

Question

私は角度のあるアプリを持っていて、ui-selectを使ってページ上にマルチセレクター付きの2つの入力フィールドとその両方のドロップダウンリストがあります。すべてうまく動作します。最初のフィールド（この場合はプログラミング言語）でオプションを選択すると、2番目のフィールド（特定のプログラミング言語に属するフレームワーク）をフィルタリングし、正しいフレームワークのリストのみを表示する必要があります。

動作するコード：

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

{ 
"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; 
    }; 
}); 

2番目のドロップダウンコードを内部で更新します。

...

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

...