I am trying to use ng-if in ng-repeat for implementing Accordions. Based upon the condition value, the ng-repeat should skip some items in ng-repeat.
E.g. If the item.condition is true then only it should display accordion. The code below is what I have so far and it is not working. Does it look right?
<accordion close-others="true">
<accordion-group is-open="isopen" ng-repeat="item in items | limitTo:2" ng-if="item.condition == "true"",ng-init="isopen=2">
<accordion-heading>
{{item.label}}
<i class="pull-right glyphicon"
ng-class="{'icon-arrow-up': isopen, 'icon-arrow-down': !isopen}"></i>
</accordion-heading>
</accordion-group>
</accordion>
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat. Save this answer.
NEST TWO ng-repeatThe first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection. By using one ng-repeat for the row and an other for the column, the rows and the columns of your table is now driven by a subset.
To avoid this problem, you can use "track by" with ng-repeat. In track by you have to use angular expression that will be used to uniquely identify the each items in collection or model. "track by" tells the angular js that how angular js will track the association between DOM and the model (i.e. collection).
Your ng-if
contain double extra quotes, It should be ng-if="item.condition == true"
, Also remove the ,
from the accordion element
Also you could minimize your condition to ng-if="item.condition"
so then expression will return true
and false
on item.condition
variable evaluation.
Markup
<accordion close-others="true">
<accordion-group is-open="isopen" ng-repeat="item in items | limitTo:2"
ng-if="item.condition" ng-init="isopen=2">
<accordion-heading>
{{item.label}}
<i class="pull-right glyphicon" ng-class="{'icon-arrow-up': isopen, 'icon-arrow-down': !isopen}"></i>
</accordion-heading>
</accordion-group>
</accordion>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With