Detailed explanation of Select of selection box in AngularJS introductory tutorial
- 2021-07-06 09:51:36
- OfStack
AngularJS Select (selection box)
AngularJS can use an array or an object to create a drop-down list option.
Create a selection box using ng-options
In AngularJS, we can use the ng-option directive to create a drop-down list, and the list items are output through objects and arrays, as shown in the following example:
Instances
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></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 = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
<p> This example demonstrates the ng-options Use of instructions. </p>
</body>
</html>
Run results:
Google Runoob TaobaoThis example demonstrates the use of ng-options instructions.
ng-options and ng-repeat
We can also use the ng-repeat directive to create a drop-down list:
Instances
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
<p> This example demonstrates how to use the ng-repeat Directive to create a drop-down list. </p>
</body>
</html>
Run results:
Google Runoob TaobaoThis example demonstrates using the ng-repeat directive to create a drop-down list.
The ng-repeat directive loops the HTML code through an array to create a drop-down list, but the ng-options directive is better suited for creating a drop-down list and has the following advantages:
An object that uses the option for ng-options, and ng-repeat is a string.
Which one should be better?
Suppose we use the following objects:
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
ng-repeat has limitations, and the selected value is a string:
Instances
Using ng-repeat:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> Select a Web site :</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1> What you chose is : {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
<p> This example demonstrates how to use the ng-repeat Directive to create a drop-down list, and the selected value is 1 Strings. </p>
</body>
</html>
Running effect:
Select a Web site:
Google Runoob Taobao
You chose: http://www.google.com
This example demonstrates the use of the ng-repeat directive to create a drop-down list with a selected value of 1 string.
Using the ng-options directive, the selected value is 1 object:
Instances
Using ng-options:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> Select a Web site :</p>
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1> What you chose is : {{selectedSite.site}}</h1>
<p> The 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 : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
<p> This example demonstrates how to use the ng-options Directive to create a drop-down list, and the selected value is 1 Objects. </p>
</body>
</html>
Running effect:
Select a Web site:
Google Runoob Taobao
Your choice is: google
The website is: http://www.google.com
This example demonstrates the use of the ng-options directive to create a drop-down list with a selected value of 1 object.
When the selected value is 1 object, we can get more information and apply it more flexibly.
Data source is an object
In the previous example, we used arrays as the data source, and in the following, we used data objects as the data source.
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
ng-options uses very different objects, as follows:
Instances
With the object as the data source, x is the key (key) and y is the value (value):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> The selected website 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 using objects as a drop-down list for creation. </p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});
</script>
</body>
</html>
Running effect:
The selected website is:
site01 site02 site03
The value you selected is: Google
This example demonstrates using objects as a drop-down list for creation.
The value you selected is value in the key-value pair.
value can also be an object in an key-value pair:
Instances
The selected value is in value of the key-value pair, so that it is 1 object:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> Select 1 Car :</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1> What you chose is : {{selectedCar.brand}}</h1>
<h2> Model : {{selectedCar.model}}</h2>
<h3> Color : {{selectedCar.color}}</h3>
<p> Note that the selected value is 1 Objects. </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>
Run results:
Select 1 car
car01 car02 car03
Your choice is: Fiat
Model: 500
Color: white
Note: The selected value is 1 object.
You can also use the properties of the object without using key in the key-value pair in the drop-down menu:
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> Select 1 Car :</p>
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p> What you chose is : {{selectedCar.brand}}</p>
<p> Model number is : {{selectedCar.model}}</p>
<p> Color is : {{selectedCar.color}}</p>
<p> Options in the drop-down list can also be properties of objects. </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>
Run results:
Select 1 car:
Ford Fiat Volvo
Your choice is: Ford
Model No.: Mustang
Color: red
Options in the drop-down list can also be properties of objects.
The above is the collation of AngularJS Select data, which will be supplemented in the future, hoping to help friends in need.