AngularJS Select (Select Box)
AngularJS can use arrays or objects to create a drop-down list option.
Use ng-options to create a selection box
In AngularJS, we can use the ng-option directive to create a drop-down list, and the list items are output loop through objects and arrays, as shown in the following example:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = ["Google", "Runoob", "Taobao"];
});
</script>
<p>This example demonstrates ng-options Use of instructions。</p>
</body>
</html>
Running results:
This example demonstrates the use of the ng-options directive.
ng-options and ng-repeat
We can also use the ng-repeat directive to create a drop-down list:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = ["Google", "Runoob", "Taobao"];
});
</script>
<p>This example demonstrates the use ng-repeat Directive to create a drop-down list。</p>
</body>
</html>
Running results:
This example demonstrates using the ng-repeat directive to create a drop-down list.
ng-repeat Directives are used to loop through arrays to create drop-down lists, but the ng-options directive is more suitable for creating drop-down lists, which has the following advantages:
An object using the option of ng-options, ng-repeat is a string.
Which one should be better?
Suppose we use the following object:
$ = [
{site : "Google", url : ""},
{site : "Runoob", url : ""},
{site : "Taobao", url : ""}
];
ng-repeat has limitations, and the selected value is a string:
Example
Use ng-repeat:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></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="{{}}">{{}}</option>
</select>
<h1>What you chose is: {{selectedSite}}</h1>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = [
{site : "Google", url : ""},
{site : "Runoob", url : ""},
{site : "Taobao", url : ""}
];
});
</script>
<p>This example demonstrates the use ng-repeat Directive to create a drop-down list，The selected value is a string。</p>
</body>
</html>
Running effect:
Select a website:
Your choice is:
This example demonstrates using the ng-repeat directive to create a drop-down list, and the selected value is a string.
Using the ng-options directive, the selected value is an object:
Example
Use ng-options:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a website:</p>
<select ng-model="selectedSite" ng-options=" for x in sites">
</select>
<h1>What you chose is: {{}}</h1>
<p>The URL is: {{}}</p>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = [
{site : "Google", url : ""},
{site : "Runoob", url : ""},
{site : "Taobao", url : ""}
];
});
</script>
<p>This example demonstrates the use ng-options Directive to create a drop-down list，The selected value is an object。</p>
</body>
</html>
Operation effect:
Select a website:
You chose: google
The URL is:
This example demonstrates using the ng-options directive to create a drop-down list, with the selected value being an object.
When selecting a value as an object, we can get more information and the application is more flexible.
Data source as object
In the previous example, we used arrays as data source, and below we used data objects as data source.
$ = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
ng-options uses objects that are very different, as follows:
Example
Use an object as the data source, x is the key and y is the value:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>The website you selected is:</p>
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>The value you selected is: {{selectedSite}}</h1>
</div>
<p>This example demonstrates the use of objects as a drop-down list。</p>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});
</script>
</body>
</html>
Running effect:
The selected website is:
The value you selected is: Google
This example demonstrates the use of objects as a create drop-down list.
The value you selected is the value in the key-value pair.
value can also be an object in the key-value pair:
Example
The selected value is in the value of the key-value pair, which is an object:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Choose a car:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>What you chose is: {{}}</h1>
<h2>Model: {{}}</h2>
<h3>color: {{}}</h3>
<p>Note that the selected value is an object。</p>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
}
});
</script>
</body>
</html>
Running results:
Choose a car
You choose: Fiat
Model: 500
Color: white
Notice:The selected value is an object.
You can also use the object's properties without using the key-value pair in the drop-down menu:
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Choose a car:</p>
<select ng-model="selectedCar" ng-options=" for (x, y) in cars"></select>
<p>What you chose is: {{}}</p>
<p>Model number is: {{}}</p>
<p>The color is: {{}}</p>
<p>The options in the drop-down list can also be attributes of the object.。</p>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
}
});
</script>
</body>
</html>
Running results:
Choose a car:
Your choice is: Ford
Model: Mustang
Color is: red
Options in the drop-down list can also be attributes of objects.
The above is a compilation of AngularJS Select information, and we will continue to add it later. I hope it can help friends in need.