AngularJS - Comment structurer un filtre personnalisé avec ng-repeat pour renvoyer des éléments de manière conditionnelle

Question

J'ai un ng-repeat qui imprime les éléments de la liste. Je souhaite écrire un filtre personnalisé pour que l'élément de la liste s'imprime, uniquement si une condition est vraie.

Il semble que je me trompe de structure car il semble que les variables ne sont pas transmises au filtre.

index.php

<div ng-show="userDetails.username" class="nav">
    <p>Menu</p>
    <li ng-repeat="menuItem in menu | matchAccessLevel:$rootScope.userDetails.accessLevel:menuItem.minAccess | orderBy:'position' ">
        <a ng-href="/angular-app/app/{{menuItem.id}}">{{menuItem.name}}</a>
    </li>
</div>

app.js

userApp.filter('matchAccessLevel', function() {
    return function( item, userAccessLevel, minAccessLevel ) {
        if( userAccessLevel >= minAccessLevel ) {
            return item;
        }
    }
});

Answer 1

Les filtres ne fonctionnent pas sur des éléments individuels du tableau, ils transforment tout le tableau en un autre tableau.

userApp.filter('matchAccessLevel', function() {
  return function( items, userAccessLevel) {
    var filtered = [];
    angular.forEach(items, function(item) {
      if(userAccessLevel >= item.minAccess) {
        filtered.Push(item);
      }
    });
    return filtered;
  };
});

Voir ceci plnkr

** toujours inspecter les arguments d'une fonction. Les valeurs ne sont pas toujours évidentes. *

voir guide des filtres

Answer 2

Vous pouvez utiliser Array.filter pour une solution plus concise:

app.filter('matchAccessLevel', function() {
    return function( items, userAccessLevel ) {
      return items.filter(function(element){
        return userAccessLevel >= element.minAccess;
      });
    }
});

Contrôle sur Plunker