Bootstrap angular JS 中的下拉列表问题

Question

我正在尝试在 bootstrap 下拉菜单中使用 ng-repeat，但它不显示下拉列表中的元素列表。我是否遗漏了从控制器中定义的方法填充下拉列表元素的任何内容。

<button type="button" class="btn btn-default btn-sm" title="Results Per Page">
  <span class="dropdown" dropdown>
     <a href class="dropdown-toggle" dropdown-toggle>
       <span class="caret"></span>
      {{Temp.obj.pageSize}} Results Per Page </a>     
          <ul class="dropdown-menu">
            <li data-ng-repeat="result in Temp.obj.availPages">
            <a href data-ng-click="Temp.obj.setSize(result)">                            
                 {{result}}</a>
            </li>
           </ul>
    </span>
</button>

Answer 1

您只是缺少 ul 列表中的 dropdown-menu 指令。

提醒一下，这里是 angular-ui bootstrap 文档中的（简化）示例。

<div class="btn-group" uib-dropdown>
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
  </ul>
</div>

看起来您使用的是旧版本的 angular-ui bootstrap，而指令没有前缀 uib-。如果可以，我建议更新您的版本。否则，只需从示例中删除前缀即可。

编辑：由于您使用的是 angular-ui bootstrap 的 1.1.2 版，因此您需要在指令前加上此答案中所示的前缀。这是 the doc for reference

Bootstrap angular JS 中的下拉列表问题

Bootstrap Dropdownlist Issue in angular JS

twitter-bootstrap

angularjs

angular-ui-bootstrap