The best AngularJS Select (check box) Tutorial In 2024, In this tutorial you can learn Create a selection box using ng-options,ng-options and ng-repeat,It should be used which is better?,Data source object,
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 : "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:
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 : "w3big", 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: