Angular JS - ng-repeat and loop conditions

Question

Hey i have this piece of code:

<div ng-repeat="i in values">
{{i}}
</div>

It works but i would like to put extra conditions inside the loop something like:

<div ng-repeat="i in values">
{{i}}
if(i !== 0){
<div></div>
}
</div>

How can i achieve this?

Davin Tryon · Accepted Answer · 2014-01-25 14:53:57Z

52

Use ng-if (or ng-show):

<div ng-repeat="i in values">
   <div ng-if="i !== 0"></div>
</div>

Attached to the element, this will decide whether to display it or not.

Documentation for ng-if can be found here.

However, if you want to only do something if you are looping the first or last item, you can use $first and $last properties of ng-repeat as well. These are documented with ng-repeat. And can be used like this:

<div ng-repeat="i in values">
   <div ng-if="$first"></div>
</div>

edited Jan 25, 2014 at 14:53

answered Jan 25, 2014 at 14:48

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

7 Comments

RaviH Over a year ago

ng-if is a better solution than ng-show because ng-if modifies the DOM. ng-show only shows/hides the element.

Davin Tryon Over a year ago

@RaviH yes, that is why the example uses ng-if. But, they are both valid solutions based on what you are trying to achieve.

Filippo oretti Over a year ago

@DavinTryon hey thank you , do you know man how can i put an incremental var in this same loop ? :P i would like to show a div inside loop only if increment%3 === 0 for example but i can't find out how :(

Davin Tryon Over a year ago

@sbaaaang There is one built in to ng-repeat: $index. You've also got $odd and $even to do things like alternate rows.

Davin Tryon Over a year ago

yeah, that should do it.

|

StarsSky · Accepted Answer · 2014-01-25 14:50:06Z

9

Use the ng-if statement

<div ng-repeat="i in values">
   {{i}}
   <div ng-if="i !== 0"></div>
</div>

answered Jan 25, 2014 at 14:50

StarsSky

6,6996 gold badges40 silver badges63 bronze badges

Collectives™ on Stack Overflow

Angular JS - ng-repeat and loop conditions

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related