動態Angular.js菜單

Question

我正在嘗試使用anuglar.js和bootstrap構建動態菜單。 此菜單需要具有下拉功能。 我已經掌握了基本菜單，但是現在我試圖添加一個下拉鏈接，但我無法正確生成選項。

我的菜單項有一個變量，如下所示：

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菜單的下拉菜單，而false時只生成一個常規菜單項。

到目前為止，這是我的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>