CODEWITHSUNDEEP
angularjs
stack_fish
stack_fish

Reputation: 77

Angularjs - conditional for ng-repeat

I am very new to AngularJs and whilst I know javascript well I'm still getting to grips with the way things works with Angular.

I am trying to generate a site navigation and can generate the top level links fine. However I am stuck with how to generate the subnav. This is what I would like to do;

<ul id='topNav'>
    <li ng-repeat="item in nav"><a href="{{item.url}}" title="{{item.title}}">{{item.title}}</a>
        <ul class="subNav" if(item.subNav.length > 0)>
            <li ng-repeat="subItem in subNav"><a href="{{subItem.url}}" title="{{subItem.title}}">{{subItem.title}}</a></li>
        </ul>
    </li>
</ul>

So, where the if(item.subNav.length > 0) appears I would like to replace that with the Angular equivalent. item.subNav is an array which is either empty or populated with the links for the subnav. If it's empty then no html is generated, otherwise loop through the links. I don't want any empty <ul class="subNav"></ul> tags.

Any help is greatly appreciated.

Upvotes: 0

Views: 890

Answers (1)

JB Nizet
JB Nizet

Reputation: 691735

The directive is named ngIf:

<ul class="subNav" ng-if="item.subNav.length > 0">

or even simpler, since 0 is falsy:

<ul class="subNav" ng-if="item.subNav.length">

Upvotes: 3

Related Questions