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