AngularJS – 如何使用ng-repeat构造自定义filter,以有条件地返回项目

我有一个ng-repeat打印列表项目。 我想写一个自定义的filter,以便列表项将打印,只有当条件为真。

我似乎有错误的结构,因为它似乎variables没有通过filter。

的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; } } }); 

filter不能处理数组中的单个项目,它们将整个数组转换为另一个数组。

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

看到这个plnkr

**总是检查一个函数的参数。 价值观并不总是显而易见的。*

见filter指南

您可以使用Array.filter来获得更简洁的解决scheme:

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

检查Plunker

对于CoffeeScript爱好者:

 userApp.filter 'matchAccessLevel', -> (items, userAccessLevel) -> item for item in items when userAccessLevel >= item.minAccess