CODEWITHSUNDEEP
javascripthtmlangularjs
trees_are_great
trees_are_great

Reputation: 3911

What is the best way to only display some of the html elements in the ng-repeat loop

I want to use an ng-if inside an ng-repeat (as described in this question): However, I want to display a row in a table if and only if the if condition holds. In the answers to the question above, you will get empty div tags where the if condition does not hold. This does not cause much of a problem with divs, but when doing the same with tables, you do not want to have div (or span) tags inbetween tr tags.

Is there another tag or directive that I could use?

Upvotes: 0

Views: 91

Answers (3)

Sander Elias
Sander Elias

Reputation: 754

A better idea is to use a (custom) filter. That way, only the needed rows are generated, in stead of hiding/removing existing ones.

I just made a plunk for another question, that showed how to use a filter:

the relevant line is this one:

<tr ng-repeat='item in appVm.users |filter:test'>

you can use a object directly in your code like this:

<tr ng-repeat='item in appVm.users |filter:{age:32}'>

If you put that line in the sample I linked in, you can see how that would work out!

Does this help you?

Upvotes: 1

mahmood.bazdar
mahmood.bazdar

Reputation: 41

you can use ng-show.its works for show and hide tags.if you don't want to angular compile inside the tag you can use ng-if.

Upvotes: 0

Asterius
Asterius

Reputation: 2200

If you just want to hide these elements, you can consider using ng-show instead of ng-if. Maybe you can also add the ng-show in the ng-if tag to hide it when empty.

Now, if you do not want to render the content at all, I think the only solution is to remove these elements from your collection in your controller

Upvotes: 1

Related Questions