Bootstrap dropdown in AngularJS ng-repeat

Question

I have an object as below. I have to display this as a drop-down. I tried this but not working

HTML

    <div ng-app="app">
  <div ng-controller="MyCntrl">
    <ul class="unstyled">
      <li class="dropdown" ng-repeat="p in people">
       {{Slected value}}   <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li>{{p.color}}</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

JS

var app = angular.module('app', []);
app.controller('MyCntrl', ['$scope', function($scope) {

  $scope.people = [{
    id: 1,
    color: 'blue',
    gender: 'male'
  }, {
    id: 2,
    color: 'red',
    gender: 'female'
  }, {
    id: 3,
    color: 'red',
    gender: 'male'
  }];
}]);

Fiddle : http://jsfiddle.net/ywkLt/210/

Dropdown is not showing up. I am new to this can anyone help me.

Edit:

I want to display selected value and followed by caret icon for dropdown. Like this : http://jsfiddle.net/qWzTb/3577/

But here I need caret icon. When I click on that, it has to display options.

You do not want to use <select></select>?

Sajal
– Sajal

2016-05-20 07:27:51 +00:00
Commented May 20, 2016 at 7:27 — Sajal
– Sajal, Commented May 20, 2016 at 7:27
I tried that too but doesn't work for me.

Nagarjuna Reddy
– Nagarjuna Reddy

2016-05-20 07:29:11 +00:00
Commented May 20, 2016 at 7:29 — Nagarjuna Reddy
– Nagarjuna Reddy, Commented May 20, 2016 at 7:29
what is this? {{Slected value}}

Hadi
– Hadi

2016-05-20 07:29:15 +00:00
Commented May 20, 2016 at 7:29 — Hadi
– Hadi, Commented May 20, 2016 at 7:29
Value which is selected from dropdown @SSH

Nagarjuna Reddy
– Nagarjuna Reddy

2016-05-20 07:29:56 +00:00
Commented May 20, 2016 at 7:29 — Nagarjuna Reddy
– Nagarjuna Reddy, Commented May 20, 2016 at 7:29

jegtugado · Accepted Answer · 2016-05-20 07:55:16Z

1

Your setup is wrong somewhere. I did try several references and the console errors kept popping up specifically on the bootstrap css.

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li ng-repeat="p in people">{{p.color}}</li>
      </ul>
    </div>
</div>

Here is a working fiddle.. http://jsfiddle.net/cec58kkb/

answered May 20, 2016 at 7:55

jegtugado

5,1511 gold badge14 silver badges35 bronze badges

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

Comments

Sajal · Accepted Answer · 2016-05-20 09:17:22Z

1

Either you didn't have a correct linking to angular.min.js or fiddle was not responding :

I created a working plunker : https://plnkr.co/edit/9PDpoZN72xeIXCZteeJz?p=preview Code:

<select ng-model="selectedPeople" ng-options="type.color for type in people">
    <option value="">All People</option>
</select>

UPDATE:

This fiddle contains both options to create a dropdown , using your html and using select :

http://jsfiddle.net/br8bur7o/1/

edited May 20, 2016 at 9:17

answered May 20, 2016 at 7:41

Sajal

4,4111 gold badge22 silver badges41 bronze badges

2 Comments

Nagarjuna Reddy Over a year ago

Thanks for reply. But I want to show only caret icon for selecting options and selected value should to be display next to that.

Sajal Over a year ago

See the Update to the answer

tfa · Accepted Answer · 2016-05-20 07:42:44Z

0

Do not think the angular is setup correctly because if I put $scope.testVal=1 in to the controller and place {{testVal}} on the HTML it is displayed as {{testVal}}

answered May 20, 2016 at 7:42

tfa

1,71917 silver badges19 bronze badges

Comments

Hadi · Accepted Answer · 2016-05-20 07:49:27Z

try this.

var app = angular.module('app', []);
app.controller('MyCntrl', ['$scope', function($scope) {

  $scope.people = [{
    id: 1,
    color: 'blue',
    gender: 'male'
  }, {
    id: 2,
    color: 'red',
    gender: 'female'
  }, {
    id: 3,
    color: 'red',
    gender: 'male'
  }];
}]);

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"/>
<div ng-app="app">
  <div ng-controller="MyCntrl">
   <select ng-model="select" ng-options="value.id as value.color for (key,value) in people "></select>
  </div>
</div>

Durgpal Singh · Accepted Answer · 2016-05-20 09:02:04Z

0

Check this out. Its working now.

<select>
  <option value = "0" label = "Please Select"></option>
  <option ng-repeat="p in people" value="{{p.color}}">
    {{p.color}}
  </option>
</select>

Link here

edited May 20, 2016 at 9:02

answered May 20, 2016 at 7:43

Durgpal Singh

12k4 gold badges40 silver badges50 bronze badges

1 Comment

Sajal Over a year ago

Your link gives 404.

Collectives™ on Stack Overflow

Bootstrap dropdown in AngularJS ng-repeat

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related