How do you get a Bootstrap Dropdown Menu to work with AngularJS ng-repeat using a controller?

Question

I am very new to both Bootstrap and AngularJS. I've been researching this problem for a while now, and I can't find what's wrong. The dropdown appears, and you can click on it, but nothing happens when you click on the arrow for the drop down. Here's the code I've been working with:

<div class="form-group">
        <div class="dropdown" style="position: absolute; left: 60px; top:       115px;">
            <button class=" btn btn-warning dropdown-toggle" type="button"     data-toggle="dropdown" id="dropdownMenu1"
                    aria-haspopup="true" aria-expanded="true">
                Select an Office
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li ng-repeat="office in ctrl.offices"><a ng-   click="moveMap(office.latitude, office.longitude)">{{office.name}}</a></li>
            </ul>

I found an example like this at this site: http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/29/how-to-work-with-the-bootstrap-dropdown-in-angularjs.aspx

Any help would be appreciated.

SgtPepper43 · Accepted Answer · 2015-07-09 14:54:17Z

1

I made a plunker with your code, everything seems to be setup right. I'd double check to make sure you're including jquery and bootstrap's javascripts. Other than that, I'd actually suggest using Angular UI's bootstrap directives. It makes things a whole lot easier.

Stack Overflow made me post code because I have a plunker link... it's weird.

  <div class="form-group">
    <div class="dropdown" style="position: absolute; left: 60px; top:       115px;">
        <button class=" btn btn-warning dropdown-toggle" type="button"     data-toggle="dropdown" id="dropdownMenu1"
                  aria-haspopup="true" aria-expanded="true">
              Select an Office
          <span class="caret"></span>
          </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li ng-repeat="office in offices"><a ng-click="moveMap(office.latitude, office.longitude)">{{office.name}}</a></li>
        </ul>
    </div>
  </div>

answered Jul 9, 2015 at 14:54

SgtPepper43

5443 silver badges15 bronze badges

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

2 Comments

Cassie DeFauw Over a year ago

Thank you! This works and I'm now getting the information from my controller. I still have a problem with the fact that the options won't go into the menu. They're showing up as a list underneath them. Here's a link to what I see. localhost:62224/App/index.html#/itmap The point of it is that you are supposed to be able to click one of the options form the dropdown and it take you to that location(office) on the map. @SgtPepper43

SgtPepper43 Over a year ago

That's a link to localhost, I can't see that. If the offices are just showing up as a list, then it sounds like something's wrong with the css.

Zillo · Accepted Answer · 2015-07-09 14:38:33Z

0

One way is to use ng-model instead of ng-repeat if that is an acceptable solution for you. Something like this:

<select class="dropdown fullWidth" ng-model="ctrl.offices"> 
     <option value="offices.Name"></option>
</select>

answered Jul 9, 2015 at 14:38

Zillo

3492 silver badges8 bronze badges

Collectives™ on Stack Overflow

How do you get a Bootstrap Dropdown Menu to work with AngularJS ng-repeat using a controller?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related