是否可以通过另一个数组中的包含来过滤angular.js？

Question

所以,如果我有一个数组:

$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表达式？

Answer 1

更新

这是一个角度模块(基于@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;
            });
        }
    };
});

其中list是您要过滤的列表(此参数默认设置为angular),arrayFilter是您用作过滤器的数组,element是要在列表中过滤的属性的名称.

要使用此过滤器,请使用ng-repeat作为:

<div ng-repeat='letter in letters | inArray:filterBy:"id"'>{{letter.id}}</div>

其中inArray是过滤器,filterBy (此过滤器的第一个参数)是要匹配的数组,"id" (第二个参数)是要与数组匹配的列表的元素.

您可以使用角度过滤器方法尝试此实例.

Answer 2

你应该尝试这样的事情:

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>

你可以尝试实例.

Answer 3

相当古老,但我需要它,我不得不改变它.这是我的过滤器"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>

我认为这可以改进,但在我的情况下不需要.

希望有人帮助!