Post
Ask Question

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:
Next Recommended Reading Create DropDownlist in AngularJS