angular ng-repeat with condition

Question

How do you do something like this in angular with ng-repeat? I'll be using the example from the documentation which inits an array with 2 friends, what if I wanted to only do a repeat for all friends that are 26 and older?

    <!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
</head>
<body>
<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
I have {{friends.length}} friends. They are:
<ul>
<li ng-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>
</body>
</html>

AlwaysALearner · Accepted Answer · 2013-08-05 13:10:04Z

25

Create a custom filter.

HTML:

<html ng-app="someApp">

and

<li ng-repeat="friend in friends | age">

JS:

var someApp=angular.module('someApp', []);

someApp.filter('age', function() {
    return function(input, uppercase) {
        var out = [];
        for (var i = 0; i < input.length; i++) {
            if(input[i].age >= 26){
                out.push(input[i]);
            }
        }
        return out;
    }
});

edited Aug 5, 2013 at 13:10

answered Aug 5, 2013 at 11:07

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

2 Comments

J.Pip Over a year ago

thx, I found it allready it's indeed a filter :) I'm still learning angular.js and tbh it's a pretty big framework with a lot of bells and whistles to which I'm not accustomed yet :)

AlwaysALearner Over a year ago

I too am going through the same road. Its just that I happened to know the answer on this occasion :D

mystertyboy · Accepted Answer · 2015-12-22 10:13:18Z

15

you can use "ng-show="friend.age >=26" with the ng-repeat="friend in friends". it will only show the friends who's age is greater than and equal to 26.

<body>
<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
      I have {{friends.length}} friends. They are:
     <ul>
         <li ng-repeat="friend in friends" ng-show="friend.age >=26">
           [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
        </li>
    </ul>
</div>
</body>

answered Dec 22, 2015 at 10:13

mystertyboy

4896 silver badges13 bronze badges

1 Comment

iGanja Over a year ago

This works, but could cause a lot of unneeded markup, especially if you want to show all other age groups the same way.

Vinod Louis · Accepted Answer · 2013-08-05 11:20:30Z

7

Here is the working fiddle

   $scope.call = function(a){

    if (a.age > 26)
        return true;
    else
        return false;

}

answered Aug 5, 2013 at 11:20

Vinod Louis

4,9061 gold badge31 silver badges50 bronze badges

2 Comments

Xogle Over a year ago

I like the filter idea better... this is strange.

doc Over a year ago

For me this is good, as you don't need to add the filter at app level, this will keep the filter function at controller scope.

Eric Aya · Accepted Answer · 2017-12-07 12:06:22Z

4

I used a filter in ng-repeat to:

<div ng-repeat="product in products | filter:{ colour: by_colour }">

edited Dec 7, 2017 at 12:06

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Dec 7, 2017 at 10:02

Selínger

514 bronze badges

3 Comments

Selínger Over a year ago

user1143634 Over a year ago

You should edit you answer instead of leaving a comment.

Eric Aya Over a year ago

@Ivan I guess OP didn't understand how to format code, and the HTML was not showing. I fixed it.

Collectives™ on Stack Overflow

angular ng-repeat with condition

4 Answers 4

2 Comments

1 Comment

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related