angular JS 中的 Bootstrap 下拉列表问题 [英] Bootstrap Dropdownlist Issue in angular JS

问题描述

我试图在引导下拉菜单中使用 ng-repeat，但它没有在下拉菜单中显示元素列表.从控制器中定义的方法填充下拉列表的元素时，我是否遗漏了任何内容.

<span class="dropdown" dropdown><a href class="dropdown-toggle" dropdown-toggle><span class="caret"></span>{{Temp.obj.pageSize}} 每页结果 </a><ul class="下拉菜单"><li data-ng-repeat="结果在 Temp.obj.availPages"><a href data-ng-click="Temp.obj.setSize(result)">{{结果}}</span>

解决方案

您很容易在 ul 列表中遗漏了 dropdown-menu 指令.

提醒一下，这里是 angular-ui bootstrap 文档中的(简化)示例.

<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>按钮下拉<span class="caret"></span><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="#">另一个动作</a></li>

当指令没有以 uib- 为前缀时，您似乎使用的是旧版本的 angular-ui 引导程序.如果可以，我建议更新您的版本.否则，只需从示例中删除前缀.

当您使用 angular-ui bootstrap 1.1.2 版时，您需要为指令添加前缀，如本答案所示.这是参考文档

I am trying to use ng-repeat in bootstrap dropdown menu, but it does not display the list of elements in drop down. am i missing anything in populating the elements of drop down list from a method defined in controller.

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

解决方案

You are simple missing the dropdown-menu directive in the ul list.

As a reminder, here is the (simplified) example from the angular-ui bootstrap doc.

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

It looks like you are using an old version of angular-ui bootstrap when the directive were not prefixed by uib-. I recommend updating your version if you can. Otherwise, just remove the prefixs from the example.

Edit: As you are using the version 1.1.2 of angular-ui bootstrap, you need to prefix the directives as shown in this answer. And here is the doc for reference

这篇关于angular JS 中的 Bootstrap 下拉列表问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！