CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Jed
Jed

Reputation: 1074

Angularjs conditional display in ng-repeat

This can be a dumb question. But I hope you can help me with this. I'm doing something like this:

<div ng-repeat="item in list" class="display-item">
   <ng-include src="mytemplate.html"></ng-include>

   <div ng-if="($index%2) == 0">
      <p>An inserted content when index is an even number.</p>
   </div>
</div>

Now this is working. The problem starts when I'm making the page responsive in all devices, cause you see when I inserted the p tag, it was created inside the parent div tag with the class display-item. What I want to do is put it outside the div tag so when the screen is smaller the p tag will not be affected by the parent tag and vise versa. So something like this:

<div ng-repeat="item in list" class="display-item">
   <ng-include src="mytemplate.html"></ng-include>
</div>
<div ng-if="($index%2) == 0">
   <p>An inserted content when index is an even number.</p>
</div>

Now the problem with the code above is $index is undefined on that part of the code and I know ng-repeat will finish iterating first before going to the second div.

Thanks in advance!

Upvotes: 1

Views: 3568

Answers (2)

Amir Suhail
Amir Suhail

Reputation: 1304

This can be easily done by using ng-repeat-start and ng-repeat-end

Try like this:

<div ng-repeat-start="item in list" class="display-item">
   <ng-include src="mytemplate.html"></ng-include>
</div>
<div ng-repeat-end ng-if="($index%2) == 0">
   <p>An inserted content when index is an even number.</p>
</div>

Upvotes: 4

Panda
Panda

Reputation: 967

@Jed, could you put a class tag on the ng-if div for an outer div? Say 

<div ng-if="($index%2)" class="outer-div-you-want">

Just a thought to try.

Upvotes: 0

Related Questions