css - 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指令到 <ul>与 ng-repeat上面还有role此答案中建议的属性:Bootstrap Dropdownlist Issue in angular JS

但是没有效果。

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 重复它添加到的元素和它的子元素)。