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
– Micros, Commented Mar 16, 2016 at 10:36

Micros · Accepted Answer · 2016-03-21 13:39:26Z

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, 2016 at 13:39

answered Jan 11, 2016 at 16:02

Micros

6,4902 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

icfantv Over a year ago

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.

Micros Over a year ago

Yeah you are right. I was going to add that. Else you get deprecation warnings in the console.

icfantv Over a year ago

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.

Kode_12 Over a year ago

This needs to be updated as the new correct answer. Thank you.

Micros Over a year ago

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

PSL · Accepted Answer · 2014-07-28 02:03:42Z

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, 2014 at 2:03

answered Jul 28, 2014 at 1:54

PSL

124k21 gold badges257 silver badges243 bronze badges

5 Comments

Artiom Over a year ago

wasted 30min because of ui.bootstrap module. +1

Brian Topping Over a year ago

@PSL seems like a great opportunity to add some docs to help others avoid the same pitfall.

icfantv Over a year ago

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.

Micros Over a year ago

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.

Mohasin Ali Over a year ago

This solution is not working in mobile browsers. is there any alternate solution for mobile browsers @PSL ?

Aakash · Accepted Answer · 2015-10-26 09:48:45Z

8

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.

answered Oct 26, 2015 at 9:48

Aakash

24.1k7 gold badges110 silver badges89 bronze badges

Comments

madhukar · Accepted Answer · 2014-07-28 09:46:30Z

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, 2014 at 9:46

madhukar

1641 gold badge1 silver badge8 bronze badges

1 Comment

Stickley Over a year ago

This was a lifesaver, particularly if you are using older Angular sample code. Thanks.

Mason · Accepted Answer · 2015-07-08 21:49:21Z

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.

dCoder · Accepted Answer · 2015-05-29 16:34:46Z

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

cbyte · Accepted Answer · 2015-11-26 02:43:11Z

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, 2015 at 2:43

cbyte

7018 silver badges13 bronze badges

Comments

Olatunde Garuba · Accepted Answer · 2016-03-22 12:41:26Z

0

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>

answered Mar 22, 2016 at 12:41

Olatunde Garuba

1,0791 gold badge17 silver badges21 bronze badges

Comments

arn-arn · Accepted Answer · 2016-10-14 20:23:28Z

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, 2016 at 20:23

arn-arn

1,3971 gold badge21 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angularjs bootstrap dropdown not working

9 Answers 9

5 Comments

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related