[Angularjs] ng-select and ng-options

[Angularjs] ng-select and ng-options
Recently, due to project requirements, I learned angularjs for a period of time and found it easy to get started. There are many places in it, which shocked me. Here we will briefly introduce the usage of ng-select and ng-options in angularjs. Ng-selectng-select is used to bind data with the <select> tag of HTML. This command can be used with the ng-model and ng-options commands to build a fine-grained dynamic form. The value of ng-options can be a comprehension expression. In short, it can receive an array or object, and loop them to provide the internal content to the select label's internal options. It can be in two forms. 1. The array is used as the data source and the values in the array are used as labels. Use the values in the array as the selected tag. Use the values in the array as the label group. Use the values in the array as the selected tag group. 2. As a data source, the object uses the key-value as a tag. Use the key-value of the object as the selected tag. Use the key-value of the object as the tag group. Use the key-value of the object as the selected tag group. Example

<! DOCTYPE html> 
 
Check the dom and you will find that the text in the above option is an object, which is easy to understand, because every item in the cities array is an object, when bound, it is directly bound to an object. So how can we only display the name attribute? <Div ng-controller = "selectController"> <select ng-model = "mycity" ng-options = "city. name for city in Cities "> </select> </div> click the property directly. Check the dom number. The value has been displayed, but it is not perfect, because the first item has no default value, then we specify the default value. $ Scope. mycity = 'beijing'; adding this code does not solve the problem. We still need to modify ng-options <select ng-model = "mycity" ng-options = "city. name as city. name for city in Cities "> </select> Let's check that dom ng-options has the following syntax for array data sources: label for value in arrayselect as label for value in arraylabel group by group for value in arrayselect as label group by group for value in array track by trackexprfor object data sources: label for (key, value) in objectselect as label for (key, value) in objectlabel group by group for (key, value) in objectselect as label group by group for (key, value) in ob adds the group attribute to the cities array and groups it by group:
<! DOCTYPE html> 
 
The ng-model has been specified here to obtain the selected value.
<! DOCTYPE html>