Ist es möglich angular.js durch Eindämmung in einem anderen Array zu filtern?

Question

Also, wenn ich ein Array haben:

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

Und ein weiteres Array

$scope.filterBy = ["b","c","d"]; 

Und ich möchte einige ng-repeat filtern scope.letters nur Artikel $ haben, die in $ filterBy erscheinen.

Ich möchte etwas auf die Wirkung der Lage sein, zu tun:

<span ng-repeat="{{letter in letters|filter: letter.id in filterBy }} > {{letter.id}} </span> 

Und es haben drucken b, c

Ich weiß, dass dies ein wirklich dummes Beispiel, aber ist es eine Möglichkeit, einen angular.js-Ausdruck basierend auf dem Inhalt eines anderen Array-Objekts filtern?

Answer 1

Sie sollten so etwas versuchen:

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> 

Sie live example versuchen.

Answer 2

aktualisiert

Hier ist ein Winkelmodul (basierend auf @InviS Antwort) auf einfache Weise diese Filter in Ihrem Winkel Anwendung zu implementieren: filters-inArrayFilter

---

Hier ist die Winkel Filter auf @InviS Ansatz antwort:

Der Filter sollte wie folgt aussehen:

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

wo Liste die Liste Sie Filterung (diese param standardmäßig durch Winkel eingestellt ist), arrayFilter ist das Array man als Filter verwenden, und Element ist der Name der Eigenschaft, die in Ihrer Liste gefiltert werden soll.

diesen Filter verwenden Sie Ihre ng-repeat wie verwenden:

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

wo InArray der Filter, filterBy(das erste Argument dieses Filters) ist Ihr Array zu entsprechen, und "ID"(zweites Argument) ist das Elem ent der Liste, die Sie mit dem Array abgleichen möchten.

Sie können dies live example mit dem Winkelfilter Ansatz versuchen.

Answer 3

Ziemlich alt, aber ich brauchte es und ich musste es ein wenig ändern. Hier ist mein 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> 

Ich vermute, das kann verbessert werden, aber in meinem Fall nicht benötigt.

Hoffe, dass jemand hilft!