if statement within a ng-repeat directive on Angular.js

Question

I am trying to implement an if into a ng-repeat directive but I am having a hard time. my code which work for now is:

<p ng-repeat="list in lists">{{list[id].title}}</p>

What I want to do is basically

<p ng-repeat="list in lists if list[id].selected">{{list[id].title}}</p>

Of course, on the second line I am getting an error. Any advice on this?

Thank you.

I don't really know Angular, but from what I've read, you probably could achieve that by using filters. — Jan.J
– Jan.J, Commented Feb 6, 2013 at 21:55
I did some study with a filter to show or not. I could do it with ng-switc, ng-show and ng-hide. The problem is that this would add a ton of stuff to my html, something that I don't know, once it's a huge list. @yabol — marceloduende
– marceloduende, Commented Feb 6, 2013 at 22:07

Jan.J · Accepted Answer · 2014-05-20 14:06:15Z

34

As I wrote in a comment, you could use filters to achieve that. Here's example: http://jsfiddle.net/sebmade/ZfGx4/44/

ng-repeat="list in lists | filter:myFilter"

And filter code:

$scope.myFilter = function(item) {
    return item.selected == true;
};

Edit:
I found that it is possible to do it with inline filter like this:

ng-repeat="list in lists | filter:{selected: true}"

answered Feb 6, 2013 at 22:05

Jan.J

3,0801 gold badge26 silver badges34 bronze badges

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

1 Comment

I see fiddle removed and shows 404. please update the link.

Shai Reznik - HiRez.io · Accepted Answer · 2013-02-06 22:11:56Z

10

What you need to add here is a filter:

<p ng-repeat="list in lists | filter:{selected:true}">test {{list.title}}</p>

answered Feb 6, 2013 at 22:11

9,0082 gold badges37 silver badges34 bronze badges