AngularJS - custom filter with ngRepeat directive

Question

I would like to use my custom filter with ngRepeat directive. Here is what I have

HTML:

<div ng-app="menuApp">
    <ul ng-controller="MenuCtrl">
        <li ng-repeat="item in menuItems | rootCategories">
            {{item.Name}}
        </li>
    </ul>
</div>

JS:

angular.module('menuApp', [])
    .filter('rootCategories', function() {
        return function(item) {
            return item.Parent == 0;
        };
    });

function MenuCtrl($scope) {
    $scope.menuItems = [{ "Id": 1, "Name": "Sweep", "Parent": 0 }];

    /*
    $scope.rootCategories = function(item) {
        return item.Parent == 0;
    };
    */
};

I do not want to use the commented out way to filter my items, because the real filter will be complicated than in the provided example. For some reasons input parameter "item" is not defined, therefore I see nothing. Could you tell me what is wrong? Thank you.

I have found the following comment: "CORRECTION: the custom filter inside of ng-repeat passes the entire associative array as input, not the key/value of each object, or {{ keyword.values }} as I previously misunderstood." But cannot invent a smart way to apply it. — Antipod, Mar 02 '13 at 05:49
I have found the following link which has helped me to solve my issue: http://stackoverflow.com/questions/11753321/passing-arguments-to-angularjs-filters — Antipod, Mar 02 '13 at 06:15

Rajkamal Subramanian · Accepted Answer · 2013-03-02T08:35:25.167

5

Please have a look at this fiddle. http://jsfiddle.net/bKFXy/. This uses the syntax of passing a predicate object as the filter expression. item in menuItems | filter:{Parent:0}

There is another method for filtering and the fiddle for that is here http://jsfiddle.net/kd5dv/

edited Mar 02 '13 at 08:35

answered Mar 02 '13 at 08:18

Rajkamal Subramanian

6,884
4
52
69

AngularJS - custom filter with ngRepeat directive

1 Answers1