AngularJS过滤多个选择输入 [英] AngularJS filter multiple select inputs
问题描述
我真的很惊讶没有任何地方的文档或关于这个更先进的AngularJS过滤机制的问题 - 这是任何用户界面必不可少的。
我需要过滤掉选择包含当前项目的选项。现在的问题是，我们如何通过遍历项来迭代每个选项，并返回正在筛选的列表中的每个选择的正确结果。
例如，如果我们有三个地区 - 加拿大，英国，美国 - 选择输入应该是这样读的：
加拿大
[选择]
[选项0]英国
[选项1]美国
英国
[选择]
[option0]加拿大
[option1]美国
美国
[选择]
[备选案文]加拿大
[备选案文1]英国
..等等...
HTML：
< div ng-repeat =data.regions中的区域> ;
< h2> {{region.name}}< / h2>
< input ui-select2 =version2type =hiddenname =keywordsLocal - {{$ index}}class =region-keywords input-xlargedata-ng-model =data。区域[$ index] .keywordsrequired-multiple />
< option value =>使用与以下相同的关键字：< / option>
< option ng-repeat =data.regions | myFiltervalue ={region.keywords}}> {{region.name}}< / option>
< / select>
< / div>
Javascript：
app.filter（'myFilter'，function（）{
return function（items）{
var group = [];
for （var i = 0; i< item.length; i ++）{
group.push（items.name）;
}
< group.length; i ++）{
group [i] .splice（i，1）;
}
返回组;
} ;
}）;
我想出了一个解决方案。这是一个基本的过滤器，但我实际上将我的ng-repeat中的索引的当前值传递给过滤器：
$ b
过滤器：
app.filter（'keywordFilter'，function（）{
返回函数（items，name）{
var arrayToReturn = [];
for（var i = 0; i< items.length; i ++）{
if（items [i] .name！= name.name）{
arrayToReturn.push（items [ i]）;
}
}
return arrayToReturn;
};
}）;
HTML
< select ui-select2 id =copy - {{$ index}}class =input-xlargeng-change =_ copy（$ index）ng-options =region.name for region in data.regions | keywordFilter：{name：region.name}data-ng-model =selectedKeywords>
< option value =>使用与以下相同的关键字：< / option>
< / select>
I am really surprised there is no documentation anywhere or questions regarding this more advanced filtering mechanism for AngularJS - it is essential for any UI.
I need to filter out select options that include the current item. The question is how can I splice out each options as we iterate through the items coming to our filter, and return the proper results for each select in the list being filtered.
for instance, if we have three regions - Canada, United Kingdom, United States - the select input should read like this:
Canada
[select]
[option0] United Kingdom
[option1] United States
United Kingdom
[select]
[option0] Canada
[option1] United States
United States
[select]
[option0] Canada
[option1] United Kingdom
.. and so on...
HTML:
<div ng-repeat="region in data.regions">
<h2> {{region.name}} </h2>
<input ui-select2="version2" type="hidden" name="keywordsLocal-{{$index}}" class="region-keywords input-xlarge" data-ng-model="data.regions[$index].keywords" required-multiple />
<select ui-select2 id="copy-{{$index}}" ng-show="region.length > 1" class="input-xlarge" ng-click="_copy($event, $index)" data-ng-model="data.regions[$index].keywords">
<option value="">Use the same keywords as:</option>
<option ng-repeat="region in data.regions | myFilter" value="{{region.keywords}}">{{region.name}}</option>
</select>
</div>
Javascript:
app.filter('myFilter', function() {
return function(items) {
var group = [];
for (var i = 0; i < items.length; i++) {
group.push(items.name);
}
for (var i = 0; i < group.length; i++) {
group[i].splice(i, 1);
}
return group;
};
});
I came up with a solution to this. it is a basic filter, but I actually pass the current value of the index in my ng-repeat to the filter:
Filter:
app.filter('keywordFilter', function() {
return function(items, name) {
var arrayToReturn = [];
for (var i = 0; i < items.length; i++) {
if (items[i].name != name.name) {
arrayToReturn.push(items[i]);
}
}
return arrayToReturn;
};
});
HTML
<select ui-select2 id="copy-{{$index}}" class="input-xlarge" ng-change="_copy($index)" ng-options="region.name for region in data.regions | keywordFilter: {name: region.name}" data-ng-model="selectedKeywords">
<option value="">Use same keywords as:</option>
</select>
这篇关于AngularJS过滤多个选择输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
