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
– Antipod, Commented Mar 2, 2013 at 5:49
I have found the following link which has helped me to solve my issue: stackoverflow.com/questions/11753321/… — Antipod
– Antipod, Commented Mar 2, 2013 at 6:15

Rajkamal Subramanian · Accepted Answer · 2013-03-02 08:35:25Z

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 2, 2013 at 8:35

answered Mar 2, 2013 at 8:18

Rajkamal Subramanian

6,9646 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - custom filter with ngRepeat directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related