Using Angular to conditionally enable bootstrap submenu

Question

I have a bootstrap 3 menu which I am trying to use Angular JS on.

I have the basic menu working, and the ng-class correctly works, applying it only in the menu has children.

What I am trying to do now is to only have the menu "work" (display the second nested UL) only if the parent LI has child data. So, I have this:

 <ul class="nav navbar-nav">
      <li ng-class="{'dropdown':(n.children.length)}" ng-repeat="n in navData">
         <a data-target="#" ng-attr="{'data-toggle=dropdown':(n.children.length>0)}">{{n.label}}</a>
        <ul class="dropdown-menu" role="menu">
          <li ng-repeat="p in n.children">{{p.label}}</li>
        </ul>
      </li>
    </ul>

The part I have wrong, or that does not work is the ng-attr on the A tag. The data-toggle=dropdown is what causes the menu to work. Currently, none of the menus work even if they have children.

My model is

var nav = [{
        label: 'Pages',
        value: 'pages',
        children: [{
            label: 'Home',
            value: 'home'
        }, {
            label: 'Left Nav',
            value: 'left-nav'
        }]
    }, {
        label: 'Components',
        value: 'components'
    }];

So, "Pages" has children and "Components" does not. The ng-class works as expected.

EDIT: I have added a "toggle" value to the model, set to "dropdown" or "" and then this works:

    <ul class="nav navbar-nav">
        <li ng-class="{'dropdown':(n.children.length)}" ng-repeat="n in navData">
         <a data-target="#" data-toggle="{{n.toggle}}">{{n.label}}</a>
          <ul class="dropdown-menu" role="menu">
            <li ng-repeat="p in n.children"><a href="#/">{{p.label}}</a></li>
          </ul>
        </li>
      </ul>

try ng-show=someValue. And in the controller check if the sub-children is present, if yes then assign true to $scope.someValue, this should work. — Abhishek Prakash
– Abhishek Prakash, Commented Mar 18, 2014 at 17:22

Steve · Accepted Answer · 2014-03-19 14:50:22Z

1

I have added a "toggle" value to the model, set to "dropdown" or "" and then this works:

<ul class="nav navbar-nav">
    <li ng-class="{'dropdown':(n.children.length)}" ng-repeat="n in navData">
     <a data-target="#" data-toggle="{{n.toggle}}">{{n.label}}</a>
      <ul class="dropdown-menu" role="menu">
        <li ng-repeat="p in n.children"><a href="#/">{{p.label}}</a></li>
      </ul>
    </li>
  </ul>

answered Mar 19, 2014 at 14:50

Steve

15k39 gold badges141 silver badges247 bronze badges

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

Collectives™ on Stack Overflow

Using Angular to conditionally enable bootstrap submenu

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related