javascript - 使用 Angular 有条件地启用 Bootstrap 子菜单

Question

我有一个 bootstrap 3 菜单，我正在尝试在其上使用 Angular JS。

我的基本菜单可以正常工作，并且 ng 类可以正常工作，仅在有子项的菜单中应用它。

我现在想做的是仅当父 LI 有子数据时才让菜单“工作”(显示第二个嵌套 UL)。所以，我有这个:

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

我错了或者不起作用的部分是 A 标签上的 ng-attr 。 data-toggle=dropdown 是导致菜单工作的原因。目前，即使有 child ，所有菜单都不起作用。

我的模型是

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

因此，“Pages”有子项，而“Components”没有。 ng 类按预期工作。

编辑:我已向模型添加了“切换”值，设置为“下拉”或“”，然后这有效:

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

Answer 1

我已经向模型添加了一个“切换”值，设置为“下拉”或“”，然后就可以了:

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