Is it possible to filter angular.js by containment in another array?

Question

So if I have an array:

$scope.letters = 
[{\"id\":\"a\"},
{\"id\":\"b\"},
{\"id\":\"c\"}];

And another array

$scope.filter         


        

Answer 1

Quite old but I needed it and I had to change it a bit. Here's my filter "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>

I supposed this can be improved but not needed in my case.

Hope that helps someone !

Answer 2

You should try something like that:

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>

You can try live example.

Answer 3

Update

Here's an angular module (based on @InviS answer) to easily implement this filter inside your angular application: filters-inArrayFilter

---

Here's the angular filters approach based on @InviS answer:

The filter should be like this:

.filter('inArray', function($filter){
    return function(list, arrayFilter, element){
        if(arrayFilter){
            return $filter("filter")(list, function(listItem){
                return arrayFilter.indexOf(listItem[element]) != -1;
            });
        }
    };
});

where list is the list you're filtering (this param is set by default by angular), arrayFilter is the array you're using as filter, and element is the name of the property to filter in your list.

To use this filter you use your ng-repeat as:

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

where inArray is the filter, filterBy (the first argument of this filter) is your array to match against, and "id" (second argument) is the element of the list you want to match against the array.

You can try this live example using the angular filters approach.