How to create a dropdown box using bootstrap and angularjs

Question

I'm trying to create a dropdownbox for choosing language using bootstrap and angularjs.

By default,the option in the dropdownbox should be populated with English.If I choose other language,the dropdownbox should be populated by that corresponding language.

How can I achieve this?Can anyone please help me out regarding this issue ...

My js code:

angular.module('Sample', [ 'ngAnimate', 'ui.bootstrap' ]);
angular.module('Sample', []).controller('Home', function($scope) {


    $scope.languages= [ 'English', 'Telugu', 'Hindi', 'Tamil' ];

});

My html code :

    <div class="dropdown">

            <button class="btn btn-default dropdown-toggle" type="button"
                id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="true">

                Language <span class="caret"></span>
            </button>

            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

                <li ng-repeat="a in languages"><a href="#">{{a}}</a></li>

            </ul>
        </div>

Do you have any code you've written to attempt this that doesn't work correctly? — Azhdeen
– Azhdeen, Commented Dec 29, 2015 at 10:14
You need to bind selected value to button drop-down on click event. — Ved
– Ved, Commented Dec 29, 2015 at 10:27

Ved · Accepted Answer · 2015-12-29 10:48:53Z

1

DEMO: FIDDLE
HTML:

<div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button"
            id="dropdownMenu1" data-toggle="dropdown"
                aria-expanded="true">
        <span ng-bind="selected.subject"></span>
        <span class="caret"></span>
     </button>
       <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li ng-repeat="subject in subjects" ng-  click="selected.subject=subject"><a href="#">{{subject}}</a></li>
      </ul>
   </div>

JS:

angular.module('SmartOCR', [ 'ngAnimate', 'ui.bootstrap' ]);
angular.module('SmartOCR', []).controller('Home', function($scope) {
    $scope.subjects = [ 'English', 'Telugu', 'Hindi', 'Tamil' ];
    $scope.selected = {subject:'English'}

});

edited Dec 29, 2015 at 10:48

answered Dec 29, 2015 at 10:22

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

7 Comments

dev333 Over a year ago

I'm able to get the default language as English.But If I change the other language ,that language should correspondingly populate on the dropdown box.

Ved Over a year ago

is it not populating when selecting other subject?

dev333 Over a year ago

No.it is not populating after the language change.

Ved Over a year ago

wait. I am creating a fiddle.

Ved Over a year ago

change ng-click="selected.subject". there is mistake.

|

Kriszta · Accepted Answer · 2015-12-29 10:35:41Z

You need to specify the ng-app and ng-controller in your project. You also need to make sure you have jquery, bootstrap and angular added to your project.

angular.module('SmartOCR', ['ngAnimate', 'ui.bootstrap']);
angular.module('SmartOCR', []).controller('HomeController', function($scope) {


  $scope.subjects = ['English', 'Telugu', 'Hindi', 'Tamil'];

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body ng-app="SmartOCR">

  <div class="dropdown" ng-controller="HomeController">

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

      Subject <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li ng-repeat="a in subjects"><a href="#">{{a}}</a>
      </li>
    </ul>

  </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

Collectives™ on Stack Overflow

How to create a dropdown box using bootstrap and angularjs

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related