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

【问题标题】：ng-repeat only populates last entry in array when used with uib-dropdownng-repeat 仅在与 uib-dropdown 一起使用时填充数组中的最后一个条目
【发布时间】：2017-04-16 12:45:38
【问题描述】：

我正在尝试使用 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 属性：Bootstrap Dropdownlist Issue in angular JS

但是没有效果。

【问题讨论】：

标签： css angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案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 重复它添加到的元素并且它是 childeren）。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：