How to bind dropdownlist Angular JS 1.0

January 16, 2018
In this article we will learn how to bind dropdownlist in Angular JS 1.0. step by step.

 How Install Angular JS 1.0
Angular JS 2.0 Overview
Setup Angular JS 2.0 in Application using Angular CLI

 Create a new website.

 Open Visual Studio->File->Add new Empty web site with name name MyFirstAngularJsApp.
  


After that Add a web page.


 Select web form.

Default.aspx shows like.




We add here a Angular JS 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:



Leave a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.