angularjs - AngularJS - 如何使用 ng-repeat 构造自定义过滤器以有条件地返回项目

Question

我有一个打印列表项的 ng-repeat。我想编写一个自定义过滤器，以便仅在条件为真时打印列表项。

我似乎结构错误，因为变量似乎没有传递到过滤器。

索引.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>

应用程序.js

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

Answer 1

过滤器不适用于数组中的单个项目，它们会将整个数组转换为另一个数组。

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

**总是检查函数的参数。值是什么并不总是很明显。 *

见过滤器指南

Answer 2

您可以使用 Array.filter 获得更简洁的解决方案：

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

检查 Plunker

Answer 3

对于 CoffeeScript 爱好者：

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