Bootstrap Dropdownlist Issue in angular JS

Question

I am trying to use ng-repeat in bootstrap dropdown menu, but it does not display the list of elements in drop down. am i missing anything in populating the elements of drop down list from a method defined in controller.

<button type="button" class="btn btn-default btn-sm" title="Results Per Page">
  <span class="dropdown" dropdown>
     <a href class="dropdown-toggle" dropdown-toggle>
       <span class="caret"></span>
      {{Temp.obj.pageSize}} Results Per Page </a>     
          <ul class="dropdown-menu">
            <li data-ng-repeat="result in Temp.obj.availPages">
            <a href data-ng-click="Temp.obj.setSize(result)">                            
                 {{result}}</a>
            </li>
           </ul>
    </span>
</button>

zoom · Accepted Answer · 2016-08-02 22:49:16Z

1

You are simple missing the dropdown-menu directive in the ul list.

As a reminder, here is the (simplified) example from the angular-ui bootstrap doc.

<div class="btn-group" uib-dropdown>
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
  </ul>
</div>

It looks like you are using an old version of angular-ui bootstrap when the directive were not prefixed by uib-. I recommend updating your version if you can. Otherwise, just remove the prefixs from the example.

Edit: As you are using the version 1.1.2 of angular-ui bootstrap, you need to prefix the directives as shown in this answer. And here is the doc for reference

edited Aug 2, 2016 at 22:49

answered Aug 2, 2016 at 21:32

zoom

1,7762 gold badges16 silver badges27 bronze badges

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

8 Comments

Skanda Over a year ago

I added the directive but still the data is not populated on the dropdown list...

zoom Over a year ago

which version of angular-ui bootstrap do you use?

Skanda Over a year ago

I have multiple versions in the scripts folder for angular 1.2.2, 1.3 and 1.5.and bootstrap version 3.2.0.

zoom Over a year ago

1.5 seems to be the angular version, not the angular-ui bootstrap. It is important to know your angular-ui bootstrap version because as I explained the directive names have changed with the versions.

zoom Over a year ago

ok, so now we need to know the version of the angular-ui bootstrap library: angular-ui.github.io/bootstrap

|

Collectives™ on Stack Overflow

Bootstrap Dropdownlist Issue in angular JS

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related