Bind DropDownList Using AngularJS

In this blog you will learn how to Bind DropDownList Using AngularJS.

It is My First AngularJs Application. In this blog you will learn how to bind dropdownlist using AngularJS step by step.

Create a new website.



After that Add a web page.



Select web form.



Default.aspx shows like.



We add here a angularjs script file like it is downloaded.
  1. <script src="script/angular.min.js"></script>  
Or we can use direct online script like:
  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>  
After that I create module here,
  1. var app = angular.module('MyFirstApp', [])  
Here MyFirstApp is a module name, I register my controller with module like:
  1. app.controller('FruiteNameBindcontrol', function($scope)   
  2. {  
  3.     $scope.Color = [  
  4.      {  
  5.         id: '1',  
  6.         name: 'Apple'  
  7.     }, {  
  8.         id: '2',  
  9.         name: 'Guava'  
  10.     }, {  
  11.         id: '3',  
  12.         name: 'Papaya'  
  13.     }, {  
  14.         id: '4',  
  15.         name: 'Orange'  
  16.     }, {  
  17.         id: '5',  
  18.         name: 'Strawberry'  
  19.     }, {  
  20.         id: '6',  
  21.         name: 'Watermelon'  
  22.     }];  
  23. });  
Then finally script is generated like:
  1. <%--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> --%>  
  2.     <script src="script/angular.min.js"></script>  
  3.     <script type="text/javascript">  
  4.         var app = angular.module('MyFirstApp', [])  
  5.         app.controller('FruiteNameBindcontrol', function($scope)  
  6.         {  
  7.             $scope.Color = [  
  8.               {  
  9.                 id: '1',  
  10.                 name: 'Apple'  
  11.             }, {  
  12.                 id: '2',  
  13.                 name: 'Guava'  
  14.             }, {  
  15.                 id: '3',  
  16.                 name: 'Papaya'  
  17.             }, {  
  18.                 id: '4',  
  19.                 name: 'Orange'  
  20.             }, {  
  21.                 id: '5',  
  22.                 name: 'Strawberry'  
  23.             }, {  
  24.                 id: '6',  
  25.                 name: 'Watermelon'  
  26.             }];  
  27.         });  
  28.     </script>  
After that I have declare controller in body tag like:

Method 1:
  1. <body data-ng-app="MyFirstApp" data-ng-controller="ColorNamecontrol">  
Now one more point here, I can also define data-ng-app="MyFirstApp" within html tag. After that I have bind color name in dropdownlist like.
  1. <option data-ng-repeat="t in Color" value="{{t.id}}">{{t.name}}  
Here I have used data-ng-repeat for iterating values for bind in dropdownlist.

All body code is given below.
  1. <body data-ng-controller="ColorNameBindcontrol">  
  2.     <form id="Form">  
  3.         Select Color:  
  4.         <select>  
  5. <option data-ng-repeat="t in Color" value="{{t.id}}">{{t.name}}</option>  
  6. </select>  
  7.     </form>  
  8.   
  9. </body>  
Complete Code show snapshot,


Method 2:

I can also bind same dropdownlist using given below statement.
  1. <select data-ng-options="s.id as s.name for s in Color" data-ng-model="col">  
Output: