The usage of ng-options in angular

First, let's look at the ngoptions parameters of the Angularjs:select API:

ngOptions(optional) – {comprehension_expression=} – In one of the following forms: For array data sources: labelfor value in array selectas label for value in array labelgroup by group for value in array selectas label group by group for value in array For object data sources: labelfor ( key , value ) in object selectas label for ( key , value ) in object label   group by   group   for (   key     Code class= "Prettyprint" >value   ) in   object selectas label group by group for ( key , value ) in object Where: array/ object : An expression which evaluates to a array/object to iterate. value: local variable which would refer to each item in the array or each property value of object during iteration. key: local variable which would refer to a property name in object during iteration. label: The result of this expression would be the label for <option> element. The would most expression likely refer to the value variable (e.g. value.propertyName ). select: The result of this expression is bound to the model of the parent <select> element. If not specified, select expression would default to value . group: The result of this expression would be used to group options using the <optgroup> DOM element.

It is said that it is impossible to understand it several times, especially the use of the label and select and group, which cannot be fully understood or used. And there are not many examples of official documents, and there are no examples of what I suspect, so it's time for me to write a complete set of examples that I believe should be understandable. Interested please refer to the following Web site: HTTP://JSBIN.COM/UKEZUJ/5

Here are some examples of what I've written, and what to look for:

First of all, prepare the Controller and Model object, which is to be provided for the View:

Myselectctrl($scope) 

{

$scope. Model = [

{

10001,

' Man ',

' Washed T-shirts ',

White

},

{

10002,

' Woman ',

' Short sleeves ',

Yellow

},

{

10002,

' Woman ',

' Short sleeves ',

Yellow

}];

}

Example 1. basic drop-down list:
labelfor value in array

<ng-model=ng-options="m.productname for M in model" >  

<value="" >--Please select--</option>   

</select>

• The value here is the m part of the code, and m This object takes an element out of the Model array, One element at a time.
• The label here is the m.productname Part of the code, which is actually a Angular form (Angular Expression) , we'll have another example of this in the next example.

Output results:

Example 2. the custom drop-down list shows the name :
labelfor value in array

<ng-model=ng-options="(M.productcolor + '-' + m.productname) for M in model" >  

<value="" >--Please select--</option>   

</select>

• The value here is the m part of the code, and m This object takes an element from the Model array, one element at a time. For the 2nd time, you should know that m in here is actually a variable that is used to store the objects taken out of the array, so this m is not a Angular , but a region variable.
• The label here is the part of the Code (M.productcolor + '-' + m.productname) , where you can see that This is actually a Angular expression (Angular expression), so it can be used to display text in a more complex drop-down list.

Output results:

Example 3. use <optgroup> according to the specific linked fields-bit group drop-down list and customize the name :
labelgroup by group for value in array

<ng-model=ng-options="(M.productcolor + '-' + m.productname) group by M.maincategory for M in Mod El ">  

<value="" >--Please select--</option>   

</select>

• The group In this case, the m.maincategory Part of the code, represents the terms that are used to set this component in groups. And in bones, it's actually using the HTML <optgroup> tag to do this.

Output results:

Example 4. the value of the Ngmodel of the custom select : select as label for value in array

<ng-model=ng-options="m.id as m.productname for M in model" >  

<value="" >--Please select--</option>   

</select>

• The Select here was the last thing I could understand, and it was discovered because we had a ng-model on the Select tag ( Select4 . ), from the first three examples of this article, when the drop-down is selected, the m -Variable value of the selected item is automatically contacted to select the Ng-model specified model object, in this case the Select4 . In this example, our select designates the m.id object and represents the final link to the Select4 . the value of the model will be the m.id value of the selected option.

Output results:

Please note : This example is completely invisible from the output screen, but if you check with the Controller $scope. Select4 , if you choose the "Washed T-shirt" above, get the $scope. Select4 becomes 10001 .

another thing to keep in mind is, please don't take a look at this <select> each <option> option value, I mean every <option value= "xxx" > v in DOM objects Alue part, because the value of this side will always be the array element index of the inside object within the AngularJS, and will not be the value of the select ( m.id ) you specified.

I believe that with the example above, we should be able to understand the actual usage of ngoptions in select Directive.

The usage of ng-options in angular