Angularjs bootstrap dropdown not working

Question

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.

Since the current answer is not valid anymore, maybe @Pals can switch the selected answer to #2? — Micros, Mar 16 '16 at 10:36

Micros · Answer 1 · 2016-03-21T13:39:26.063

75

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']);

edited Mar 21 '16 at 13:39

answered Jan 11 '16 at 16:02

Micros

5,966
2
28
34

2

Just a note that beginning with the 1.0 release we've required a uib- prefix for all our directives and have physically removed support for the old directive names due to namespace clashes and native browser elements. – icfantv Jan 11 '16 at 18:11
Yeah you are right. I was going to add that. Else you get deprecation warnings in the console. – Micros Jan 12 '16 at 10:36
Well, my point was that the deprecated code (and the warnings) are all removed starting at 1.0 so you wouldn't see them anymore and your code won't work. A double whammy. – icfantv Jan 12 '16 at 17:02
1

This needs to be updated as the new correct answer. Thank you. – Kode_12 Oct 23 '17 at 01:08
Hi @Pals, if you agree with Kode_12, could you please move the accepted answer to this entry instead of the one currently selected (with less votes)? Make StackOverflow a better place :-) – Micros Oct 24 '17 at 08:25

PSL · Answer 2 · 2014-07-28T02:03:42.873

32

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>

Plnkr

edited Jul 28 '14 at 02:03

answered Jul 28 '14 at 01:54

PSL

123,204
21
253
243

9

wasted 30min because of ui.bootstrap module. +1 – Artiom Dec 05 '14 at 21:55
2

@PSL seems like a great opportunity to add some docs to help others avoid the same pitfall. – Brian Topping Dec 12 '14 at 22:53
2

Just a note that beginning with the 1.0 release we've required a `uib-` prefix for all our directives and have physically removed support for the old directive names due to namespace clashes and native browser elements. – icfantv Jan 11 '16 at 18:10
3

Please note this answer is not valid for recent editions of UI-Bootstrap, since uib-dropdown needs to be an attribute, not a class. As discussed in the often mentioned Github issue 2156. – Micros Jan 20 '16 at 09:03
This solution is not working in mobile browsers. is there any alternate solution for mobile browsers @PSL ? – Mohasin Ali Sep 16 '16 at 10:19

score 8 · Answer 3 · answered Oct 26 '15 at 09:48

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.

score 5 · Accepted Answer · answered Jul 28 '14 at 09:46

5

You need to add on-toggle to your anchor tag, to avoid conflicts between bootstrap dropdown angular dropdown class, this issue is a closed on angular-ui(https://github.com/angular-ui/bootstrap/issues/2156)

answered Jul 28 '14 at 09:46

madhukar

146
1
8

This was a lifesaver, particularly if you are using older Angular sample code. Thanks. – Stickley Apr 09 '15 at 02:21

score 1 · Answer 5 · answered Jul 08 '15 at 21:49

I found a great resource from here regarding the subject, as I had the same issue. I'll outline what I did below.

Download ui bootstrap
Move zipped file to target directory for app, and unzip
locate the latest edition of the ui bootstrap release, which in my case, is located at "bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js"
Include the minified js file in your main .html file: <script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script>
Go back to Angular directives and scroll down to the dropdown section. Copy their javascript into your primary js file and html samples and customize as usual

That's what did it for me. Hope that helps anyone else with the same issue.

score 0 · Answer 6 · answered May 29 '15 at 16:34

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. i.e. 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

score 0 · Answer 7 · answered Nov 26 '15 at 02:43

0

Worked out pretty simple the solution (after trying to find it for ages) Simply add "dropdown-toggle" directive to your button

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

answered Nov 26 '15 at 02:43

cbyte

681
7
12

score 0 · Answer 8 · answered Mar 22 '16 at 12:41

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>

score 0 · Answer 9 · answered Oct 14 '16 at 20:23

0

for Angular 2:

add npm install ng2-bootstrap --save
then follow the example from GITHUB: https://github.com/valor-software/ng2-bootstrap/tree/development/demo/components/dropdown

answered Oct 14 '16 at 20:23

arn-arn

1,328
1
21
31

Angularjs bootstrap dropdown not working

9 Answers9

Linked