Am bit new to angularjs and bootstrap.
Am trying to add a simple dropdown. But it is not working.
Tried out the suggestion @ Bootstrap 3 simple dropdown not working . That is also 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>
Complete code @ http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview
Hope someone would help me out.
NOTE: Most answers here are outdated! The main issue is that the dropdown
directive is not available as a class anymore, but only as an attribute , and that it has been renamed to uib-dropdown
.
I was stuck here for a while, but changing the class into an attribute worked as a charm.
Also, you need to use the 'uib-' prefix for each directive instead of plain names.
<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>
(And of course, make sure you did not forget to include the ui.bootstrap module in your app.)
var app = angular.module('App', ['ui.router','ui.bootstrap']);
You need to include ui.bootstrap
module in your app.
var app = angular.module('App', ['ui.router','ui.bootstrap']);
and also remove ui-sref
from the dropdown trigger.
<a class="dropdown-toggle" data-toggle="dropdown" >a<span class="caret"></span></a>
data-toggle="dropdown"
should be removed. I guess it creates some conflict with 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>
Hope this helps.
你需要在你的锚标签上添加on-toggle,以避免bootstrap下拉角下拉类之间发生冲突,这个问题在angular-ui上是关闭的( https://github.com/angular-ui/bootstrap/issues/2156 )
I found a great resource from here regarding the subject, as I had the same issue. I'll outline what I did below.
<script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
That's what did it for me. Hope that helps anyone else with the same issue.
First make sure you included ui.bootstrap module in your app
var app = angular.module('App', ['other inclusions','ui.bootstrap']);
Then if the problem still persists don't use dropdown-toggle and dropdown as directives. Instead use as class. ie class = 'dropdown-toggle' etc.
For Example :
<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>
Refer this issue. https://github.com/angular-ui/bootstrap/issues/2156
制定了非常简单的解决方案(试图找到它多年后)只需在按钮上添加“dropdown-toggle”指令即可
<button class="btn btn-primary " dropdown-toggle type="button">Drop Me Down<span class="caret"></span></button>
Well, I noticed that the attribute "dropdown" need to be added to the li element, once that is added, everything will be fine.
<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>
for Angular 2:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.