English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS Basic Tutorial

AngularJS Select (Selection Box)

AngularJS can create a dropdown list option using an array or an object.

Using ng-options to create a selection box

In AngularJS, we can use ng-option directive to create a dropdown list, the list items are output through object and array looping, as shown in the following example:

Online Example

div ng-app="myApp" ng-controller="myCtrl"
　<select ng-init="selectedName = names[0]" 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 = ["Baidu", "w3codebox", "Taobao"]
});/script>

ng-init to set the default selected value.

ng-options with ng-repeat

We can also useng-repeat directive to create a dropdown list:

Online Example

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

ng-repeat directive creates a dropdown list by looping HTML code through an array, but ng-options directive is more suitable for creating dropdown lists, and it has the following advantages:

Using ng-options The options is an object, ng-repeat is a string.

Which one should we use better?

Suppose we use the following object:

$scope.sites = [
　　　　{"site": "Google", "url": "http:"}//www.google.com",}
　　　　{"site": "w3codebox", "url": "http:"}//www.oldtoolbag.com",
　　　　{"site": "Taobao", "url": "http:"}//www.taobao.com"}
];

ng-repeat has limitations, the selected value is a string:

Online Example

Using ng-repeat:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"
<p>Select a website:</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>You have selected: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
　　　$scope.sites = [
　　　　　　　　{"site": "Google", "url": "http:"}//www.google.com",}
　　　　　　　　{"site": "w3codebox", "url": "http:"}//www.oldtoolbag.com",
　　　　　　　　{"site": "Taobao", "url": "http:"}//www.taobao.com"}
　　　　];
});
</script>
<p>This example demonstrates the use of-repeat directive to create a dropdown list, the selected value is a string.</p>
</body>
</html>
Test and See ‹/›

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

Online Example

Using ng-options:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"
<p>Select a website:</p>
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>You have selected: {{selectedSite.site}}</h1>
<p>URL is: {{selectedSite.url}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
　　　$scope.sites = [
　　　　　　　　{"site": "Google", "url": "http:"}//www.google.com",}
　　　　　　　　{"site": "w3codebox", "url": "http:"}//www.oldtoolbag.com",
　　　　　　　　{"site": "Taobao", "url": "http:"}//www.taobao.com"}
　　　　];
});
</script>
<p>This example demonstrates the use of-The options directive is used to create a dropdown list, and the selected value is an object.</p>
</body>
</html>
Test and See ‹/›

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

Data source is an object

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

$scope.sites = {
　　　　site01　: "Google"
　　　　site02　: "w"3codebox",
　　　　site03　: "Taobao"
};

ng-options Using an object is quite different, as shown below:

Online Example

Using an object as the data source: x For key(key),y For value(value):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"
<p>The selected website is:</p>/p>
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>The value you have selected is: {{selectedSite}}</h1>
</div>
<p>This example demonstrates the use of an object to create a dropdown list.</p>/p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
　　　　$scope.sites = {
　　　　　　　　site01　: "Google"
　　　　　　　　site02　: "w"3codebox",
　　　　　　　　site03　: "Taobao"
　　　　};
});
</script>
</body>
</html>
Test and See ‹/›

The value you have selected is in the-value key value.

value The selected value can also be an object in the-value key

Online Example

The selected value is in the-value is value , this is because it is an object:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"
<p>Select a car:</p>/p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You have selected: {{selectedCar.brand}}</h1>
<h2>Model: {{selectedCar.model}}</h2>
<h3>Color: {{selectedCar.color}}</h3>
<p>Attention, the selected value is an object.</p>/p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
　　　　$scope.cars = {
　　　　　　　　car01　: {brand: "Ford", model: "Mustang", color: "red"},
　　　　　　　　car02　: {brand: "Fiat", model: "500, color: "white"},
　　　　　　　　car03　: {brand: "Volvo", model: "XC90, color: "black"}
　　　　}
});
</script>
</body>
</html>
Test and See ‹/›

You can also not usekey-value in the 　key , directly use the properties of the object:

Online Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"
<p>Select a car:</p>/p>
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>You have selected: {{selectedCar.brand}}</p>
<p>Model: {{selectedCar.model}}</p>
<p>Color: {{selectedCar.color}}</p>
<p>The options in the dropdown list can also be object properties.</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
　　　　$scope.cars = {
　　　　　　　　car01　: {brand: "Ford", model: "Mustang", color: "red"},
　　　　　　　　car02　: {brand: "Fiat", model: "500, color: "white"},
　　　　　　　　car03　: {brand: "Volvo", model: "XC90, color: "black"}
　　　　}
});
</script>
</body>
</html>
Test and See ‹/›

　 　 　 　 　 　 　 　 　 　 　 　 　 　

AngularJS Reference ManualAngularJS Http