AngularJS Select (check box)
AngularJS can create a drop-down list of options to use an array or object.
Create a selection box using ng-options
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:
Examples
<Select ng-model = "selectedName " ng-options = "x for x in names">
</ Select>
</ Div>
<Script>
app.controller ( 'myCtrl', function ( $ scope) {
$ scope.names = [ "Google", "w3big", "Taobao"];
});
ng-options and ng-repeat
We can also useng-repeat directive to create a drop-down list:
Examples
<Option ng-repeat = "x in names"> {{x}} </ option>
</ Select>
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.
It should be used which is better?
Suppose we use the following objects:
$scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "w3big", url : "http://www.w3write.com"}, {site : "Taobao", url : "http://www.taobao.com"} ];
ng-repeat has its limitations, the chosen value is a string:
Examples
Useng-repeat:
<Option ng-repeat = "x in sites" value = "{{x.url}}"> {{x.site}} </ option>
</ Select>
<H1> Your choice is: {{selectedSite}} </ h1>
Useng-options command, select the value of an object:
Examples
Useng-options:
</ Select>
<H1> Your choice is: {{selectedSite.site}} </ h1>
<P> URL is: {{selectedSite.url}} </ p>
When you select the value is an object, we can get more information and applications more flexible.
Data source object
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 : "w3big", site03 : "Taobao" };
ng-options using objects are very different, as follows:
Examples
Using the object as a data source,x is the key (key),y is a value (value):
</ Select>
<H1> value you choose: {{selectedSite}} </ h1>
Your choice is value in key- value pairs.
value in the key- value pairs can also be a target:
Examples
Select the value in the key- value of the value, which is that it is an object:
car01: {brand: "Ford" , model: "Mustang", color: "red"},
car02: {brand: "Fiat" , model: "500", color: "white"},
car03: {brand: "Volvo" , model: "XC90", color: "black"}
};
May not be used key -value pairs key, use the properties of an object directly in the drop-down menu:
Examples
</ Select>