Angularjs Select (selection 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 of items that are cycled through objects and arrays, as follows:
Instance
<! 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 use of the ng-options directive. </ p>
</ body>
</ html>
Run Result:
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:
Instance
<! 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 the use of the ng-repeat directive to create a drop-down list. </ p>
</ body>
</ html>
Run Result:
This example demonstrates the use of the Ng-repeat directive to create a drop-down list.
The ng-repeat instruction uses an array to loop through the HTML code to create a Drop-down list, but the ng-options directive is better suited to creating a drop-down list, which has the following advantages:
An object that uses the Ng-options option, Ng-repeat is a string.
Which one should I use better?
Let's say 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, the selected value is a string:
Instance
Use 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 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: "Runoob", url: "http://www.runoob.com"},
{site: "Taobao", url: "http://www.taobao.com"}
];
});
</ script>
<p> This example demonstrates the use of the ng-repeat directive to create a drop-down list. The selected value is a string. </ p>
</ body>
</ html>
Operation Effect:
Select a Web site:
GoogleRunoobTaobao
Your choice is: http://www.google.com.
This example demonstrates the use of 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:
Instance
Use 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 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: "Runoob", url: "http://www.runoob.com"},
{site: "Taobao", url: "http://www.taobao.com"}
];
});
</ script>
<p> This example demonstrates using the ng-options directive to create a drop-down list, and the selected value is an object. </ p>
</ body>
</ html>
Operation Effect:
Select a Web site:
GoogleRunoobTaobao
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, and the selected value is an object.
When the selection 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, and here we use the data object as the data source.
$scope. Sites = {
site01: "Google",
site02: "Runoob",
site03: "Taobao"
};
Ng-options use objects are very different, as follows:
Instance
Use object as data source, X is key (key), Y is 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 an object as a drop-down list. </ p>
<script>
var app = angular.module ('myApp', []);
app.controller ('myCtrl', function ($ scope) {
$ scope.sites = {
site01: "Google",
site02: "Runoob",
site03: "Taobao"
};
});
</ script>
</ body>
</ html>
Operation Effect:
The selected sites are:
Site01Site02Site03
The value you choose is: Google
This example demonstrates using objects as a drop-down list.
The value you select is Key-value in the pair.
Value can also be an object in a Key-value pair:
Instance
The value of the selection is in value of the Key-value pair, which is an 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> Choose a car: </ 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> Note that the selected value is an object. </ 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 Result:
Choose a car
Car01Car02Car03
Your choice is: Fiat.
Model: 500
Color: White
Note: The selected value is an object.
You can also use the properties of the object directly in the Drop-down menu without using the key in Key-value:
Instance:
<! 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> Choose a car: </ p>
<select ng-model = "selectedCar" ng-options = "y.brand for (x, y) in cars"> </ select>
<p> You have selected: {{selectedCar.brand}} </ p>
<p> The model is: ((selectedCar.model)) </ p>
<p> The color is: ((selectedCar.color)) </ p>
<p> The options in the drop-down list can also be attributes of the object. </ 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 Result:
Choose a car:
FordFiatVolvo
Your choice is: Ford.
Model: Mustang
Color: Red
The options in the Drop-down list can also be properties of the object.
The above is the ANGULARJS select data collation, follow-up continue to add, hope to help needy friends.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
