AngularJS Select

AngularJS Select Boxes

AngularJS lets you create dropdown lists based on items in an array or an object.

*Creating a Select Box Using ng-options

If you want to create a dropdown list, based on an object or an array in AngularJS, you should use the ng-options directive:

Example:
<div ng-app="myapp" ng-controller="myctrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
  $scope.names = ["Dhaval", "Tejas", "Manthan"];
});
</script>

* ng-options vs ng-repeat

You can also use the ng-repeat directive to make the same dropdown list:

Example:
<select>
  <option ng-repeat="x in names">{{x}}</option>
</select>

Because the 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, but 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.

*What Do I Use?

Assume you have an array of objects:

$scope.cars = [
  {model : "Ford", color : "red"},
  {model : "Honda", color : "white"},
  {model : "Volvo", color : "black"}
];


The ng-repeat directive has its limitations, the selected value must be a string:

Example:
Using ng-repeat:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>

<h1>You selected: {{selectedCar}}</h1>


When using the ng-options directive, the selected value can be an object:

Example:
Using ng-options:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>

When the selected value can be an object, it can hold more information, and your application can be more flexible.

We will use the ng-options directive in this tutorial.

*The Data Source as an Object
In the previous examples, the data source was an array, but we can also use an object.

Assume you have an object with key-value pairs:

$scope.cars = {
  car01 : "Ford",
  car02 : "Honda",
  car03 : "Volvo"
};

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

Example:
Using an object as the data source, x represents the key, and y represents the value:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>You selected: {{selectedCar}}</h1>

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:

Example:
The selected value will still be the value in a key-value pair, only this time it is an object:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Honda", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

The options in the dropdown list does not have to be the key in a key-value pair, it can also be the value, or a property of the value object:

Example:
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>