it-swarm.com.de

AngularJS - Strukturieren eines benutzerdefinierten Filters mit ng-repeat, um Elemente bedingt zurückzugeben

Ich habe eine ng-Wiederholung, die Listenelemente druckt. Ich möchte einen benutzerdefinierten Filter schreiben, damit das Listenelement nur gedruckt wird, wenn eine Bedingung erfüllt ist.

Ich scheine die Struktur falsch zu haben, da es scheint, dass die Variablen nicht an den Filter übergeben werden.

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;
        }
    }
});
58
Fisu

Filter wirken sich nicht auf einzelne Elemente im Array aus, sondern wandeln das gesamte Array in ein anderes Array um.

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

Siehe dies plnkr

** Überprüfen Sie immer die Argumente zu einer Funktion. Es ist nicht immer offensichtlich, wie hoch die Werte sind. *

siehe Filteranleitung

124
Liviu T.

Sie können Array.filter für eine präzisere Lösung verwenden:

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

Check on Plunker