web-dev-qa-db-fra.com

Est-il possible de filtrer angular.js par confinement dans un autre tableau?

Donc, si j'ai un tableau:

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

Et un autre tableau

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

Et je veux avoir une répétition ng pour filtrer $ scope.letters uniquement par les éléments qui apparaissent dans $ filterBy.

Je veux pouvoir faire quelque chose pour:

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

Et faites-le imprimer b, c

Je sais que c'est un exemple vraiment stupide, mais existe-t-il un moyen de filtrer une expression angular.js en fonction du contenu d'un autre objet tableau?

arraysangularjsfiltering
21
infomofo

Vous devriez essayer quelque chose comme ça:

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>

Vous pouvez essayer exemple en direct .

29
ValeriiVasin

Mise à jour

Voici un angular (basé sur la réponse @InviS) pour implémenter facilement ce filtre dans votre angular: filters-inArrayFilter

Voici l'approche angular basée sur la réponse @InviS:

Le filtre doit être comme ceci:

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

où list est la liste que vous filtrez (ce paramètre est défini par défaut par angulaire), arrayFilter est le tableau que vous utilisez comme filtre et element est le nom de la propriété à filtrer dans votre liste.

Pour utiliser ce filtre, vous utilisez votre ng-repeat comme:

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

où inArray est le filtre, filterBy (le premier argument de ce filtre) correspond à votre tableau et " id " (deuxième argument) est l'élément de la liste que vous souhaitez faire correspondre au tableau.

Vous pouvez essayer ceci exemple en direct en utilisant angular.

35
Cyberdelphos

Assez vieux mais j'en avais besoin et j'ai dû le changer un peu. Voici mon filtre "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>

Je suppose que cela peut être amélioré mais pas nécessaire dans mon cas.

J'espère que cela aide quelqu'un!

6
Clement Dungler