Angularjs - conditional for ng-repeat

Question

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.

see this stackoverflow.com/questions/37269152/nested-ng-repeat-angularjs/… — Hadi
– Hadi, Commented Jun 19, 2016 at 15:41

JB Nizet · Accepted Answer · 2016-06-19 15:40:30Z

3

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">

answered Jun 19, 2016 at 15:40

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs - conditional for ng-repeat

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related