WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Select Boxes


AngularJS can use arrays or objects to create a drop-down list option.


Create select box with ng-options

In AngularJS, we can use the ng-option directive to create a drop-down list, and the list items are cyclically output through objects and arrays, as in the following example:

Example

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

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

</div>

<script>
var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
Try it Yourself »

ng-options and ng-repeat

We can also use the ng-repeat directive to create a drop-down list:

Example

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Try it Yourself »

ng-repeat directive is to loop through HTML code to create a drop-down list, but the ng-options directive is more suitable for creating drop-down lists. It has the following advantages: < /p>

The options using ng-options are an object, and ng-repeat is a string.

What Do I Use?

Suppose we use the following objects:

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

ng-repeat has limitations. The value selected is a string:

Example

Using ng-repeat:

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

<h1>You chose: {{selectedCar}}</h1>
Try it Yourself »

With the ng-options directive, the selected value is an object:

Example

Using ng-options:

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

<h1>You chose: {{selectedCar.model}}</h1>
<p>It's color is: {{selectedCar.color}}</p>
Try it Yourself »

When the selection value is an object, we can get more information and the application is more flexible.


The Data Source as an Object

In the previous example, we used an array as the data source. Below, we use the data object as the data source.

ng-options uses objects very differently, as shown below:

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

The value you choose is in key- value value of the alignment.

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

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

<h1>You chose: {{selectedCar}}</h1>
Try it Yourself »

The value you choose is in key- value value of the alignment.

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

Example

The selected value is in the value of the key-value pair, this is it's an object:

$scope.cars = {
car01 : {brand : "Passage", model : "Horse", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Try it Yourself »

In the drop-down menu, you can also use the object's properties without using the key in the key-value pair:

Example

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
Try it Yourself »