AngularJS Select

AngularJS Select with examples on mvc, expression, directive, controller, module, scope, filter, dom, form, ajax, validation, services, animation, dependency injection and more.

AngularJS Select

AngularJS Select

In AngularJS, you can create a dropdown list (select box) based on items in an array or an object.


Using ng-options

You should use the ng-option directive to create a dropdown list, based on an object or an array in AngularJS.

See this example:

  1.  <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="myCtrl">  
  6. <select ng-model="selectedName" ng-options="x for x in names">  
  7. </select>  
  8. </div>  
  9. <script>  
  10. var app = angular.module('myApp', []);  
  11. app.controller('myCtrl', function($scope) {  
  12.     $scope.names = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];  
  13. });  
  14. </script>  
  15. </body>  
  16. </html> 

Note:

You can also use the ng-repeat directive to make the same dropdown list as ng-options.

See this example:

  1.  <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="myCtrl">  
  6. <select>  
  7. <option ng-repeat="x in names">{{x}}</option>  
  8. </select>  
  9. </div>  
  10. <script>  
  11. var app = angular.module('myApp', []);  
  12. app.controller('myCtrl', function($scope) {  
  13.         $scope.names = ["Java", "PHP", ".Net", "AngularJS", "C/C++"];  
  14. });  
  15. </script>  
  16. <p>The same example of dropdown list using the ng-repeat directive.</p>  
  17. </body>  
  18. </html> 

ng-options vs. ng-repeat

Although both can be used for a dropdown list, ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, while the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:

Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

Consider that you have an array of objects:

  1. $scope.cars = [  
  2.     {model : "Ford Mustang", color : "red"},  
  3.     {model : "Fiat 500", color : "white"},  
  4.     {model : "Volvo XC90", color : "black"}  
  5. ];  

Limitation of ng-repeat

The ng-repeat directive has a limitation that the selected value must be a string:

See this example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="myCtrl">  
  6. <p>Select a car:</p>  
  7. <select ng-model="selectedCar">  
  8. <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>  
  9. </select>  
  10. <h1>You selected: {{selectedCar}}</h1>  
  11. </div>  
  12. <script>  
  13. var app = angular.module('myApp', []);  
  14. app.controller('myCtrl', function($scope) {  
  15.     $scope.cars = [  
  16.         {model : "Ford", color : "red"},  
  17.         {model : "Honda", color : "white"},  
  18.         {model : "Volvo", color : "black"},  
  19.         {model : "Hundai", color : "gray"}  
  20.     ];  
  21. });  
  22. </script>  
  23. </body>  
  24. </html> 

While using the ng-options directive, you can select an object value:

See this example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="myCtrl">  
  6. <p>Select a car:</p>  
  7. <select ng-model="selectedCar" ng-options="x.model for x in cars">  
  8. </select>  
  9. <h1>You selected: {{selectedCar.model}}</h1>  
  10. <p>It's color is: {{selectedCar.color}}</p>  
  11. </div>  
  12. <script>  
  13. var app = angular.module('myApp', []);  
  14. app.controller('myCtrl', function($scope) {  
  15.        $scope.cars = [  
  16.         {model : "Ford", color : "red"},  
  17.         {model : "Honda", color : "white"},  
  18.         {model : "Volvo", color : "black"},  
  19.         {model : "Hundai", color : "gray"}  
  20.     ];  
  21.   
  22. });  
  23. </script>  
  24. </body>  
  25. </html> 

Use data source as an object

We can also use data source as an object.

Consider that you have an object with following key-value pairs:

  1. $scope.cars = {  
  2.         car01 : "Ford",  
  3.         car02 : "Honda",  
  4.         car03 : "Volvo",  
  5.         car03 : "Hundai",  
  6.     };  

The expression in the ng-options attribute is a bit different for objects:

See this example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="myCtrl">  
  6. <p>Select a car:</p>  
  7. <select ng-model="selectedCar" ng-options="x for (x, y) in cars">  
  8. </select>  
  9. <h1>You selected: {{selectedCar}}</h1>  
  10. </div>  
  11. <script>  
  12. var app = angular.module('myApp', []);  
  13. app.controller('myCtrl', function($scope) {  
  14.     $scope.cars = {  
  15.         car01 : "Ford",  
  16.         car02 : "Honda",  
  17.         car03 : "Volvo",  
  18.         car03 : "Hundai",  
  19.     }  
  20. });  
  21. </script>  
  22. </body>  
  23. </html> 

Example2:

The selected value will always be the value in a key-value pair.

The value in a key-value pair can also be an object:

  1. $scope.cars = {  
  2. car01 : {brand : "Ford", model : "Mustang", color : "red"},  
  3. car02 : {brand : "Honda", model : "city", color : "white"},  
  4. car03 : {brand : "Volvo", model : "XC90", color : "black"},  
  5. car04 : {brand : "Hundai", model : "Creta", color : "gray"}  
  6. };  

See this example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5. <div ng-app="myApp" ng-controller="myCtrl">  
  6. <p>Select a car:</p>  
  7. <select ng-model="selectedCar" ng-options="x for (x, y) in cars">  
  8. </select>  
  9. <h1>You selected: {{selectedCar.brand}}</h1>  
  10. <h2>Model: {{selectedCar.model}}</h2>  
  11. <h3>Color: {{selectedCar.color}}</h3>  
  12. </div>  
  13. <script>  
  14. var app = angular.module('myApp', []);  
  15. app.controller('myCtrl', function($scope) {  
  16.     $scope.cars = {  
  17. car01 : {brand : "Ford", model : "Mustang", color : "red"},  
  18. car02 : {brand : "Honda", model : "city", color : "white"},  
  19. car03 : {brand : "Volvo", model : "XC90", color : "black"},  
  20. car04 : {brand : "Hundai", model : "Creta", color : "gray"}  
  21.     }  
  22. });  
  23. </script>  
  24. </body>  
  25. </html>