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>
  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:

9 Comments

Join the conversation! Your thoughts help the community grow.

  • nitin gudalePosted Oct 29, 2020, 3:45 AM

    How can i get only unique value to dropdown list

  • Tridip BhattacharjeePosted May 14, 2018, 4:07 AM

    Nice article but this code is not clear <select data-ng-options="s.id as s.name for s in Color" data-ng-model="col"> how drowdown will understand what to show as value and what to show as text?

  • Amit Kumar

    Amit KumarPosted Oct 5, 2017, 6:06 AM

    For more help go through http://www.c-sharpcorner.com/article/how-to-fetch-data-from-the-database-using-angularjs-in-web-api2/

  • Amit Kumar

    Amit KumarPosted Oct 5, 2017, 6:05 AM

    Hi, Ruhul, you will have to create a service and send the request through it and get data and bind it.

  • Ruhul AminPosted Sep 28, 2017, 12:14 AM

    I need data from oracle server in select dropdown list , but how ?

  • Amit Kumar

    Amit KumarPosted Apr 12, 2016, 5:25 AM

    Thanks

    • Amit Kumar

      Amit KumarPosted Apr 21, 2018, 12:46 PM

      Thanks Gowtham Rajamanickam.