Twitter Bootstrap drop down not working with angularJs

Question

I am creating a simple web application with twitter bootstrap and angularjs.When i am creating the dropdown it not creating it below i am giving in which order i have added files

<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/style.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/font-awesome-ie7.min.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/angular-ui.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/css/angular-ui.min.css">
<link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/resources/select2/select2.css">

<script type="text/javascript" src="${rc.getContextPath()}/resources/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/js/bootstrap.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/js/bootstrap.min.js"></script>

`

<script type="text/javascript" src="${rc.getContextPath()}/resources/js/angular-ui.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/js/angular-strap.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/resources/select2/select2.js"></script>

And in firebug i can see in same order files are loaded than what is problem why bootstrap dropdowns are not working ?

This is how i am creating it

<div style="margin: 0;" class="btn-toolbar">
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Danger <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Warning <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
        </div>
    <div>

You will need to share the code for the dropdown that isn't working to get help. — Jason
– Jason, Commented May 23, 2013 at 14:58
Dropdown binds on load, AngularJS injects html after load. The typical recommendation for this is to use Angular Bootstrap instead: angular-ui.github.io/bootstrap — Mike Robinson
– Mike Robinson, Commented May 23, 2013 at 15:00

Greg · Accepted Answer · 2014-03-26 15:36:29Z

I had issues getting angular-strap navbar working with dropdowns. I added a couple lines in the top of my html file and the dropdowns started working:

    <link rel="stylesheet" href="l/vendor/bootstrap.min.css">
    <script src="l/vendor/bootstrap.min.js"></script>

The symptom I saw was that the dropdown appeared in the navbar, but didn't "dropdown" when clicked. Changing the html to include the lines above fixed the issue. I had thought it would work just with angular-strap, but, no.

By the way, here is my navbar code:

<div class="row navigation">
        <div class="navbar navbar-default" role="navigation" bs-navbar>
          <div class="navbar-header">
            <a class="navbar-brand" href="#/">Home</a>
          </div>
          <ul class="nav navbar-nav">
            <li data-match-route="/api"><a href="#/api">Api</a></li>
            <li data-match-route="/stream"><a href="#/stream">Stream</a></li>
            <li bs-dropdown class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li data-match-route="/api"><a href="#api">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
            <li data-match-route="/other"><a href="#/other">Other</a></li>
          </ul>
          <ul class="nav pull-right">
            <li data-match-route="/login"><a href="#/login">Login</a></li>
          </ul>
        </div>
      </div>
</div>

Collectives™ on Stack Overflow

Twitter Bootstrap drop down not working with angularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related