35

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.

Improve this question
1
  • Since the current answer is not valid anymore, maybe @Pals can switch the selected answer to #2?
    – Micros
    Commented Mar 16, 2016 at 10:36

9 Answers 9

Reset to default
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']);
Improve this answer
5
  • 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
    Commented Jan 11, 2016 at 18:11
  • Yeah you are right. I was going to add that. Else you get deprecation warnings in the console.
    – Micros
    Commented Jan 12, 2016 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
    Commented Jan 12, 2016 at 17:02
  • 1
    This needs to be updated as the new correct answer. Thank you.
    – Kode_12
    Commented Oct 23, 2017 at 1: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
    Commented Oct 24, 2017 at 8:25
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

Improve this answer
5
  • 9
    wasted 30min because of ui.bootstrap module. +1
    – Artiom
    Commented Dec 5, 2014 at 21:55
  • 2
    @PSL seems like a great opportunity to add some docs to help others avoid the same pitfall.
    – Brian Topping
    Commented Dec 12, 2014 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
    Commented Jan 11, 2016 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
    Commented Jan 20, 2016 at 9:03
  • This solution is not working in mobile browsers. is there any alternate solution for mobile browsers @PSL ?
    – Mohasin Ali
    Commented Sep 16, 2016 at 10:19
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.

Improve this answer
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)

Improve this answer
1
  • This was a lifesaver, particularly if you are using older Angular sample code. Thanks.
    – Stickley
    Commented Apr 9, 2015 at 2:21
1

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

  1. Download ui bootstrap
  2. Move zipped file to target directory for app, and unzip
  3. 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"
  4. 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>
  5. 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.

Improve this answer
0

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

Improve this answer
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>
Improve this answer
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>
Improve this answer
0

for Angular 2:

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.