javascript - 动态 Angular.js 菜单

Question

我正在尝试使用 anuglar.js 和 Bootstrap 构建动态菜单。此菜单需要具有下拉功能。我已经获取了基本菜单，但现在我正在尝试添加下 zipper 接，但我无法获得正确生成的选项。

我有一个带有菜单项的变量，如下所示:

var nav = [

    {
        display: 'Home', 
        link: '#/',
        drop: false,
    },
    {
        display: 'Categories', 
        link: '#/', 
        drop: true,
        sub: [
            {
                display: 'Sub 1',
                link: '#/'
            },
            {
                display: 'Sub 2',
                link: '#/'
            },
            {
                display: 'Sub 3',
                link: '#/'
            }
        ]
    }

];

当 drop 为 true 时，我想要一个下拉菜单来生成 sub 项，而当它为 时，只是一个常规菜单项>假。

到目前为止，这是我的 HTML:

<ul class="nav navbar-nav">
    <li class="dropdown" ng-repeat="nav in nav" ng-if="drop == nav.drop">
      <a class="dropdown-toggle" data-toggle="dropdown" href="{{nav.link}}">
        {{nav.display}}
        <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li ng-repeat="sub in nav.sub"><a href="{{sub.link}}">{{sub.display}}</a></li>
      </ul>
    </li>
    <li ng-if="drop != nav.drop" ng-repeat="nav in nav">
      <a href="{{nav.link}}">{{nav.display}}</a>
    </li>
</ul>

现在一切都作为正常链接生成。

Answer 1

我认为 ng-if 是问题所在。改变这个:

ng-if="drop == nav.drop"

为此:

ng-if="nav.drop"

还有这个:

ng-if="drop != nav.drop"

为此:

ng-if="!nav.drop"

顺便说一句，我同意评论者的观点，即 ng-repeat="nav in nav" 令人困惑。

编辑:

如何获取一个列表而不是两个:

<ul class="nav navbar-nav">
  <li class="dropdown" ng-repeat="nav in nav">
    <a ng-if="!nav.drop" href="{{nav.link}}">{{nav.display}}</a>        
    <a ng-if="nav.drop" class="dropdown-toggle" data-toggle="dropdown" href="{{nav.link}}">
      {{nav.display}}
      <b class="caret"></b>
    </a>
    <ul ng-if="nav.drop" class="dropdown-menu">
      <li ng-repeat="sub in nav.sub"><a href="{{sub.link}}">{{sub.display}}</a></li>
    </ul>
  </li>
</ul>