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="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>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="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 using the 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.
The ng-repeat directive uses an array to loop HTML code to create drop-down lists, but the ng-options directive is more suitable for creating drop-down lists, and it has the following advantages:
An object using the ng-options option, ng-repeat is a string.
Which one should be better?
Suppose we use the following object:
$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:
Example
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 chosen: {{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 using the ng-repeat directive to create a drop-down list, and the selected value is a string. </p></body></html>Running effect:
Select a website:
Your choice is: http://www.google.com
This example demonstrates using the ng-repeat directive to create a drop-down list, with the selected value being 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="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 chosen: {{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 the use of the ng-options directive to create a drop-down list, and the selected value is an object. </p></body></html>Running effect:
Select a website:
You chose: google
The URL is: http://www.google.com
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.
$scope.sites = { 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="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 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 instance demonstrates the use of objects 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>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="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 car:</p><select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select><h1>You choose: {{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>Running results:
Choose a car
You choose: Fiat
Model: 500
Color: white
Note: The selected value is an object.
You can also use the key in the key-value pair instead of using the key-value pair, and use the object's properties directly:
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 a car:</p><select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select><p>You have chosen: {{selectedCar.brand}}</p><p>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>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.