Create DropDownlist in AngularJS

I will describe the usage by creating a sample.

This example uses the ng-repeat and two way binding to create a HTML dropdown.

HTML Code:
  1. <!DOCTYPE html>  
  2. <html ng-app>  
  3.     <head>  
  4.         <title>Simple app</title>  
  5. src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  6.     </script>  
  7.     <script>  
  8.         function MyCtrl($scope) {  
  9.              $scope.values = [  
  10.                 {'Dropdonw''D1'},  
  11.              ];  
  12.              $scope.colorcode = [  
  13.                 {'hashCode''R''description''Red'},  
  14.                 {'hashCode''G''description''Green'},  
  15.                 {'hashCode''Y''description''Yellow'},  
  16.                 {'hashCode''P''description''Pink'}  
  17.              ];  
  18.         }  
  19.     </script>  
  20. </head>  
  21. <body >  
  22.     <div ng-controller="MyCtrl" style="border:solid 1px red; top:200px;left:350px;height:600px;width:400px;">  
  23.         <div ng-repeat="val in values">  
  24. Select the option  
  25.   
  26.             <select  
  27. ng-model="val.option"  
  28. ng-options="code.hashCode as code.description for code in colorcode"></select>  
  29.             <tt>Option selected: {{val.option}}</tt>  
  30.         </div>  
  31.     </div>  
  32. </body>undefined  
  33.       
  34. </html>  
Explanation:

 

  1. Created one div and specified the controller:
    1. <div ng-controller="MyCtrl"></div>  
  2. Now I am using ng-repeat attribute to create the how many dropdown to be created. In this example using the $scope.values array.

  3. Adding option to the Dropdown:

    The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select>element using an array.

    ng-options="code.hashCode as code.description for code in colorcode": It will loop through all the items in colorcode and create the options.

Output:

Output

Ebook Download
View all
Learn
View all