Angularjs:ng-select and Ng-options

Angular.js has a very powerful directive: Ng-select It can help you create select elements from a data model. It supports the syntax of the select tag very well, but it's a bit of a pit.

Suppose you have the following JSON data:

{"    myoptions": [        {            "id": 106,            "group": "Group 1",            "label": "Item 1"        },        {            "id": 107,            "group": "Group 1",            "label": "Item 2"        },        {            "id": +,            "group": "Group 2",            " Label ":" Item 3 "        }, $scope. myoptions = data.myoptions;

The data is simple: I have a few groupings, each of which contains some of my own options. If you want to create a SELECT element directly with this data, it can be cumbersome. So, I put the code in the following way: Angularjs is automatically grouped

<select    ng-model= "myoption"    ng-options= "value.id as Value.label Group by Value.group for value in Myoptions" >    <option>--</option></select>

The value of Ng-model points to the value of the currently selected item of the SELECT element. The ng-options instruction is used to populate the Select drop-down option, and its value needs to be looked at: it's easier for us to look to the left from the right, first of all: value in Myoptions

It indicates that you want to iterate over the Myoptions object under the current scope. When iterating, the name of each item in the Myoptions object is called value.

Next: Group BY Value.group

It tells Angular.js to create this tag:

<optgroup label= "Value.group" >...</optgroup>

The Label property of the tag will be populated with the value's Group property values.

Finally: Value.id as Value.label

The value.id will be bound to the model and its value will be stored in the Ng-model attribute (that is, option value, which is selected as the value of the select tag). If you do not write value.id as, but write only Value.label, then the entire object will be the value of Ng-model.

Value.label is the option name for the options element. The result of this code rendering is as follows:

<optgroup label= "Group 1" >   <option value= "0" >item 1</option> <option   value= "1" >item 2</option></optgroup>

Take a closer look at the Value property of the options: You might think that its value should be the id attribute value in the data model, but that's not the case (although I thought so at first). In fact, it is an incrementing number, which points to the index value of the model ( The model here is the myoptions array. Don't worry about it-when the user chooses an item, the correct ID is still selected and passed to the Ng-model attribute. Also, if there is no value.id part in your ng-options expression, The entire object that corresponds to the selected item becomes the value of the Ng-model.

You can simply test it:

<select     ng-change= "selectaction ()"    ng-model= "myoption"    ng-options= "value.id as Value.label Group by Value.group for value in Myoptions ">    <option>--</option></select>

When the user selects an item, the Ng-change event is triggered and you can print it out:

$scope. selectaction = function () {    console.log ($scope. myoption);};

Finally, the general select tag will have an initial state, such as "--Please Choose-". This item has no value. You can add an option tag directly to the SELECT element:

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

This does not affect the data model. If the user does not have a choice, or if the "--select--" Item is selected, the Ng-model value is empty. Well understood.

Ng-options's grammar is a bit counter-human. A reasonable grammatical design might be like this:

foreach value in myoptions use Value.label as label with Value.id as model group by Value.group

Angularjs:ng-select and Ng-options