所以,如果我有一个数组:
$scope.letters =
[{"id":"a"},
{"id":"b"},
{"id":"c"}];
另一个数组
$scope.filterBy = ["b","c","d"];
我希望有一些ng-repeat来过滤$ scope.letters只能出现在$ filterBy中的项目。
我希望能够做一些事情:
<span ng-repeat="{{letter in letters|filter: letter.id in filterBy }} > {{letter.id}} </span>
并打印b,c
我知道这是一个非常愚蠢的例子,但有没有办法根据另一个数组对象的内容过滤angular.js表达式?
答案 0 :(得分:35)
<强>更新强>
这是一个角度模块(基于@InviS答案),可以在角度应用程序中轻松实现此过滤器: filters-inArrayFilter
这是基于@InviS答案的角度滤波器方法:
过滤器应该是这样的:
.filter('inArray', function($filter){
return function(list, arrayFilter, element){
if(arrayFilter){
return $filter("filter")(list, function(listItem){
return arrayFilter.indexOf(listItem[element]) != -1;
});
}
};
});
其中 列表 是您要过滤的列表(此参数默认设置为angular), arrayFilter 是您用作过滤器的数组, 元素 是要在列表中过滤的属性的名称。
要使用此过滤器,请将ng-repeat用作:
<div ng-repeat='letter in letters | inArray:filterBy:"id"'>{{letter.id}}</div>
其中 inArray 是过滤器, filterBy (此过滤器的第一个参数)< / em>是要匹配的数组, “id” (第二个参数)是您要匹配的列表的元素数组。
您可以使用角度过滤器方法尝试此live example。
答案 1 :(得分:29)
你应该尝试类似的东西:
JS:
angular.module('Test', []);
function Ctrl($scope) {
$scope.letters = [
{id: 'a'},
{id: 'b'},
{id: 'c'}
];
$scope.filterBy = ['b', 'c', 'd'];
$scope.filteredLetters = function () {
return $scope.letters.filter(function (letter) {
return $scope.filterBy.indexOf(letter.id) !== -1;
});
};
}
Ctrl.$inject = ['$scope'];
HTML:
<div ng-repeat='letter in filteredLetters(letters)'>{{letter.id}}</div>
您可以尝试live example。
答案 2 :(得分:6)
相当陈旧,但我需要它,我不得不改变它。 这是我的过滤器“notInArray”
app.filter('notInArray', function($filter){
return function(list, arrayFilter, element){
if(arrayFilter){
return $filter("filter")(list, function(listItem){
for (var i = 0; i < arrayFilter.length; i++) {
if (arrayFilter[i][element] == listItem[element])
return false;
}
return true;
});
}
};
});
<md-chips ng-model="filter.SelectedValues" md-autocomplete-snap
md-require-match="true">
<md-autocomplete
md-search-text="searchFilterChip"
md-items="val in filter.Values | notInArray:filter.SelectedValues:'Id'"
md-item-text="val.Name"
md-no-cache="true"
md-min-length="0">
<span md-highlight-text="searchFilterChip">{{val.Name}}</span>
</md-autocomplete>
<md-chip-template>
{{$chip.Name}}
</md-chip-template>
</md-chips>
我认为这可以改进但在我的情况下不需要。
希望能帮助别人!