ng-repeat 仅在与 uib-dropdown 一起使用时填充数组中的最后一个条目

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 指令添加到带有 ng-repeat 的 <ul> 以及此答案中建议的 role 属性：

但是没有效果。

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

ng-repeat 仅在与 uib-dropdown 一起使用时填充数组中的最后一个条目

ng-repeat only populates last entry in array when used with uib-dropdown

css

twitter-bootstrap

angularjs

angular-ui-bootstrap