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.
- <script src="script/angular.min.js"></script>
Or we can use direct online script like:
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
After that I create module here,
- var app = angular.module('MyFirstApp', [])
Here MyFirstApp is a module name, I register my controller with module like:
- app.controller('FruiteNameBindcontrol', function($scope)
- {
- $scope.Color = [
- {
- id: '1',
- name: 'Apple'
- }, {
- id: '2',
- name: 'Guava'
- }, {
- id: '3',
- name: 'Papaya'
- }, {
- id: '4',
- name: 'Orange'
- }, {
- id: '5',
- name: 'Strawberry'
- }, {
- id: '6',
- name: 'Watermelon'
- }];
- });
Then finally script is generated like:
- <%--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> --%>
- <script src="script/angular.min.js"></script>
- <script type="text/javascript">
- var app = angular.module('MyFirstApp', [])
- app.controller('FruiteNameBindcontrol', function($scope)
- {
- $scope.Color = [
- {
- id: '1',
- name: 'Apple'
- }, {
- id: '2',
- name: 'Guava'
- }, {
- id: '3',
- name: 'Papaya'
- }, {
- id: '4',
- name: 'Orange'
- }, {
- id: '5',
- name: 'Strawberry'
- }, {
- id: '6',
- name: 'Watermelon'
- }];
- });
- </script>
After that I have declare controller in body tag like:
Method 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.
- <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.
- <body data-ng-controller="ColorNameBindcontrol">
- <form id="Form">
- Select Color:
- <select>
- <option data-ng-repeat="t in Color" value="{{t.id}}">{{t.name}}</option>
- </select>
- </form>
-
- </body>
Complete Code show snapshot,
Method 2:
I can also bind same dropdownlist using given below statement.
- <select data-ng-options="s.id as s.name for s in Color" data-ng-model="col">
Output:
![]()