WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Select Boxes


AngularJS gives you a chance to make dropdown records dependent on things in an exhibit, or an object.


Creating a Select Box Using ng-options

If you need to make a dropdown list, in view of an item or a cluster in AngularJS, you should utilize the ng-option directive:

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-choices versus ng-repeat

You can likewise utilize the ng-repeat order to make the equivalent dropdown list:

Example

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

Because the ng-repeat mandate rehashes a square of HTML code for every thing in an exhibit, it very well may be utilized to make choices in a dropdown list, however the ng-options order was made particularly to fill a dropdown list with choices, and has somewhere around one imperative advantage:

Dropdowns made with ng-options enables the chose an incentive to be a object, while dropdowns produced using ng-repeat has to be a string.

What Do I Use?

Assume you have a variety of objects:

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

The ng-repeat order has it's constraints, the chose esteem must be 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 »

When utilizing the ng-options mandate, the chose esteem can be 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 shading is: {{selectedCar.color}}</p>
Try it Yourself »

When the chose esteem can be an article, it can hold more data, and your application can be more flexible.

We will utilize the ng-options mandate in this tutorial.


The Data Source as an Object

In the past precedents the information source was an exhibit, however we can likewise utilize an object.

Assume you have an article with key-esteem pairs:

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

The articulation in the ng-options characteristic is somewhat extraordinary for objects:

Example

Using an item as the information source, x speaks to the key, and y speaks to the value:

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

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

The chose esteem will dependably be the value in a key-value pair.

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

Example

The chose esteem will in any case be the value in a key-value pair, just this time it is an object:

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

The choices in the dropdown list does not have be the key in a key-esteem pair, it can likewise be the esteem, or a property of the esteem object:

Example

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