Question

对于angularjs和bootstrap来说有点新鲜。

我试图添加一个简单的下拉列表。但它没有用。

尝试了@ Bootstrap 3 simple dropdown not working的建议。那也行不通。

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a>
<ul class="dropdown-menu">
  <li><a ui-sref="a">a</a></li>
  <li><a ui-sref="b">b</a></li>
  <li><a ui-sref="c">c</a></li>
  <li><a ui-sref="d">d</a></li>
  <li><a ui-sref="e">e</a></li>
  <li><a ui-sref="f">f</a></li>
  <li><a ui-sref="g">g</a></li>
  <li><a ui-sref="h">h</a></li>
  <li><a ui-sref="i">i</a></li>         
  <li><a ui-sref="j">j</a></li>
  <li><a ui-sref="k">k</a></li>
</ul>
</li>

完整代码@ http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview

希望有人能帮助我。

Answer 1

注意：这里的大多数答案都已过时了！主要问题是dropdown指令不再作为类提供，但仅作为属性，并且已重命名为uib-dropdown。

我被困在这里一段时间了，但是把这个班级改成一个属性就像一个魅力。

此外，您需要为每个指令使用＆＃39; uib - ＆＃39; 前缀而不是普通名称。

<li uib-dropdown>
    <a uib-dropdown-toggle>a<span class="caret"></span></a>
    <ul uib-dropdown-menu>
        <li><a ui-sref="a">a</a></li>
        <li><a ui-sref="b">b</a></li>
        <li><a ui-sref="c">c</a></li>
        <li><a ui-sref="d">d</a></li>
    </ul>
</li>

（当然，请确保您不要忘记在您的应用中包含ui.bootstrap模块。）

var app = angular.module('App', ['ui.router','ui.bootstrap']);

Answer 2

您需要在应用中加入ui.bootstrap模块。

var app = angular.module('App', ['ui.router','ui.bootstrap']);

并从下拉触发器中移除ui-sref。

<a class="dropdown-toggle" data-toggle="dropdown" >a<span class="caret"></span></a>

<强> Plnkr

Answer 3

应删除

data-toggle="dropdown"。我想这会与ui.bootstrap

产生一些冲突

<li class="dropdown" uib-dropdown>
            <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" uib-dropdown-toggle href="" role="button">
              <span class="glyphicon glyphicon-flag"></span>
              Events
              <span class="caret"></span>
            </a>
            <ul class="uib-dropdown-menu" role="menu">
              <li>
                <a href="">Event 1</a>
              </li>
              <li>
                <a href="">Event 2</a>
              </li>
            </ul>

希望这有帮助。

Answer 4

你需要在你的锚标签上添加一个on-toggle，以避免bootstrap下拉角下拉类之间的冲突，这个问题是关闭角度ui（https://github.com/angular-ui/bootstrap/issues/2156）

Answer 5

我找到了here关于这个主题的优秀资源，因为我遇到了同样的问题。我将概述下面的内容。

下载ui bootstrap
将压缩文件移至app的目标目录，然后解压缩
找到最新版本的ui bootstrap版本，在我的例子中，位于“bootstrap-gh-pages / ui-bootstrap-tpls-0.13.0.min.js”
在您的主.html文件中包含缩小的js文件： <script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
返回Angular directives并向下滚动到下拉列表部分。将他们的javascript复制到您的主要js文件和html示例中并照常定制

这就是为我做的事情。希望能帮助其他人解决同样的问题。

Answer 6

首先确保在您的应用中包含了ui.bootstrap模块

var app = angular.module('App', ['other inclusions','ui.bootstrap']);

然后，如果问题仍然存在，请不要使用dropdown-toggle和dropdown作为指令。而是用作类。即class ='dropdown-toggle'等。

例如：

<div class="dropdown dropdown-append-to-body">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle = "dropdown">Dropdown on Body <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
    </ul>
</div>

请参阅此问题。 https://github.com/angular-ui/bootstrap/issues/2156

Answer 7

制定了非常简单的解决方案（试图找到它多年后）只需在按钮上添加“dropdown-toggle”指令

<button class="btn btn-primary " dropdown-toggle type="button">Drop Me Down<span class="caret"></span></button>

Answer 8

好吧，我注意到需要将属性“下拉列表”添加到li元素中，一旦添加，一切都会好的。

<li class="dropdown" dropdown>
   <a href="#" dropdown-toggle role="button" aria-haspopup="true" aria-expanded="false">... <span class="caret"></span></a>
   <ul class="dropdown-menu">
       ...
   </ul>
</li>

Answer 9

for Angular 2：

添加npm install ng2-bootstrap --save
然后按照GITHUB的例子： https://github.com/valor-software/ng2-bootstrap/tree/development/demo/components/dropdown

Angularjs bootstrap下拉列表无法正常工作

9 个答案: