Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I want to skip the item in ng-repeat using ng-if

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>
like image 403
mahi244 Avatar asked Jun 26 '15 20:06

mahi244


People also ask

What can I use instead of NG-repeat?

You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

What is the difference between Ng options and 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.

How do you use two ng-repeat in a table?

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.

How do I use track in NG-repeat?

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).


1 Answers

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>
like image 70
Pankaj Parkar Avatar answered Sep 23 '22 00:09

Pankaj Parkar