HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
AngularJS can create a drop-down list of options to use an array or object.
In AngularJS we can useng-option command to create a drop-down lists, list items through objects and arrays cycle of the output, following examples:
We can also useng-repeat directive to create a drop-down list:
ng-repeat instruction is to loop through the array of HTML code to create drop-down list, but ng-optionscommand better suited for creating drop-down list, it has the following advantages:
An object usingng-options options,ng-repeat is a string.
Suppose we use the following objects:
$scope.sites = [ {site : "Google", url : "https://www.google.com.hk/"}, {site : "w3resource", url : "https://w3resource.net/"} ];
ng-repeat has its limitations, the chosen value is a string:
Useng-repeat:
Useng-options command, select the value of an object:
Useng-options:
When you select the value is an object, we can get more information and applications more flexible.
Previous example we use an array as a data source, we have the following data objects as the data source.
$scope.sites = { site01 : "Google", site02 : "w3resource", site03 : "Taobao" };
ng-options using objects are very different, as follows:
Using the object as a data source,x is the key (key),y is a value (value):
Your choice is value in key- value pairs.
value in the key- value pairs can also be a target:
Select the value in the key- value of the value, which is that it is an object:
May not be used key -value pairs key, use the properties of an object directly in the drop-down menu: