如何使用 angular ui-select 过滤两个字段中的数据?
How can I filter data in two fields using angular ui-select?
我有一个 angular 应用程序并使用 ui-select,在页面上有两个带有多个 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" 匹配才能使过滤器正常工作。
问题:
我该如何解决这个问题?我应该使用一些自定义过滤器吗?
谢谢!
您必须创建自定义过滤器 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">
...
我有一个 angular 应用程序并使用 ui-select,在页面上有两个带有多个 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" 匹配才能使过滤器正常工作。
问题:
我该如何解决这个问题?我应该使用一些自定义过滤器吗?
谢谢!
您必须创建自定义过滤器 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">
...