Question

我正在尝试使用UI Bootstrap的uib-dropdown和ng-repeat填充下拉菜单，但只填充了数组中的最后一条记录。

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
            <a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
            <ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
                <li><a href="{{ resource.ResourceLink }}" target="_blank">{{ resource.ResourceText }}</a></li>
            </ul>
        </li>
    </ul>
</div>

我已确认TN.resourceList有3条记录。

如果我删除：class="dropdown-menu"

来自：<ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">

然后显示所有记录，但不再显示为下拉菜单。

我还尝试将uib-dropdown-menu指令添加到<ul>并添加ng-repeat以及role属性，如此答案所示：{{3} }

但它没有效果。

Answer 1

＆＃13;

       <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
                <a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li ng-repeat="resource in TN.resourceList"><a href="{{ resource.ResourceLink }}" target="_blank">{{ resource.ResourceText }}</a></li>
                </ul>
            </li>
        </ul>
    </div>

＆＃13;

注意li上的ng-repeat而不是ul dom元素（ng-repeat重复它添加到的元素和它的childeren）。

Answer 2

您正在重复dropdown-menu本身。您应该有一个dropdown-menu并重复li：

＆＃13;

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
            <a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li ng-repeat="resource in TN.resourceList"><a href="{{ resource.ResourceLink }}" target="_blank">{{ resource.ResourceText }}</a></li>
            </ul>
        </li>
    </ul>
</div>

＆＃13;

Answer 3

最简单的答案是考虑将ng-repeat本身视为一个循环。在普通的html中，你不希望有多个列表或'ul'标签吗？您可能需要一个包含多个条目或“li”标签的列表。

将上面的答案视为直接答案，但实际上，您应该能够查看代码并确定要重复列表条目而不是列表本身。

与uib-dropdown

3 个答案: