AngularJS - Cách cấu trúc bộ lọc tùy chỉnh với ng-repeat để trả về các mục có điều kiện

Question

Tôi có một ng-lặp lại in các mục danh sách. Tôi muốn viết một bộ lọc tùy chỉnh để mục danh sách sẽ in, chỉ khi điều kiện là đúng.

Tôi dường như có cấu trúc sai vì dường như các biến không được chuyển qua bộ lọc.

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

lọc không làm việc trên từng mục trong mảng đó, họ chuyển đổi toàn bộ mảng vào mảng khác.

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

Xem này plnkr

** luôn luôn kiểm tra các đối số cho hàm. Nó không phải luôn luôn rõ ràng những gì các giá trị là *

thấy filters guide

Answer 2

Đối với những người yêu thích CoffeeScript:.

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

Answer 3

Bạn có thể sử dụng Array.filter kiếm một giải pháp ngắn gọn hơn:

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

Check on Plunker