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: '#/'
            }
        ]
    }

];

我想要一个下拉菜单，在sub为drop时生成true项，并在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>

动态Angular.js菜单

1 个答案: