Angula Select

AngularJS Select Boxes

---

AngularJS lets you lot practise dropdown lists based on items inward an array, or an object.

---

Creating a Select Box Using ng-options

If you lot desire to practise a dropdown list, based on an object or an array inward AngularJS, you lot should exercise the ng-options directive:

Example

<div ng-app="myApp" ng-controller="myCtrl">

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

</div>

<script>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

---

ng-options vs ng-repeat

You tin too exercise the ng-repeat directive to construct the same dropdown list:

Example

<select>
<option ng-repeat="x inward names">{{x}}</option>
</select>

Because the ng-repeat directive repeats a block of HTML code for each particular inward an array, it tin hold out used to practise options inward a dropdown list, simply the ng-options directive was made peculiarly for filling a dropdown listing alongside options, together with has at to the lowest degree 1 of import advantage:
Dropdowns made alongside ng-options allows the selected value to hold out an object, piece dropdowns made from ng-repeat has to hold out a string.

What Do I Use?

Assume you lot convey an array of objects:

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

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

Example

Using ng-repeat:

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

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

When using the ng-options directive, the selected value tin hold out an object:

Example

Using ng-options:

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

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

When the selected value tin hold out an object, it tin tally to a greater extent than information, together with your application tin hold out to a greater extent than flexible.
We volition exercise the ng-options directive inward this tutorial.

---

The Data Source every bit an Object

In the previous examples the information origin was an array, simply nosotros tin too exercise an object.
Assume you lot convey an object alongside key-value pairs:

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

The human face inward the ng-options attribute is a flake dissimilar for objects:

Example

Using an object every bit the information source, x represents the key, together with y represents the value:

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

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

The selected value volition e'er hold out the value inward a key-value pair.
The value inward a key-value span tin too hold out an object:

Example

The selected value volition withal hold out the value inward a key-value pair, exclusively this fourth dimension it is an object:

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

The options inward the dropdown listing does non convey to hold out the key inward a key-value pair, it tin too hold out the value, or a belongings of the value object:

Example

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

---