Advanced use of ng-options and ng-checked in forms (recommended)

AngularJS is a very popular front-end framework at present. It has a lot of syntax sugar and is very convenient for front-end developers, but it still needs to be considered if it has usage.

ng-options

In the select form control, summarize the current writing methods.

Ordinary writing

<select>
  <option value="test1">test1</option>
  <option value="test1">test1</option>
  <option value="test1">test1</option>
  <option value="test1">test1</option>
</select>

Advantages: Simple

shortcoming:

• The code is not concise, and if there are many options, it will be messy
• Inconvenient rendering, if option changes, you need to use js to dynamically load it.
• Inconvenient to store objects

Use ng-repeat

ng-repeat is a very powerful directive in angularJS. It is very convenient for front-end developers on rendering lists. So because there are multiple duplicate options, of course you can use ng-repeat, and the usage is as follows:

<select>
  <option ng-repeat="option in options" value="{{option}}">{{}}</option>
</select>
<script>
  $ = [{id:1,name:'test1'},{id:2,name:'test2'},{id:3,name:'test3'}];
</scirpt>

advantage:

• Code introduction
• Can store objects, easy to obtain values

shortcoming:

• No default display! ,In some interface requirements, select may require the display prompt effect of placeholder, so the default display effect is blank when using this method.
• The currently selected value cannot be obtained through ng-model

Use ng-options

Here we use the option of a grade and class as an example: that is, after selecting the grade, the corresponding optional class will be displayed.

<select ng-model="" ng-change="modalChangeGrade()" ng-options=" for grade in ">
  <option value="" disabled>Please select</option>
</select>
<script>
  $ = [
  {id:1,gradeText:'First year',classes:[]},
  {id:2,gradeText:'The second grade',classes:[]},
  {id:3,gradeText:'First year of high school'},classes:[]];
  $ = function(){
    //I won't write HTML fragments of the class here    $ = $;
  }
</scirpt>

Note:

The option "Please select" needs to have a value, otherwise an error will be reported

If you want to set the default selection value, such as selecting "First Year of High School" from the beginning, you need to set the object of modal in the array.

$ = $[2];//The position angle mark of the first-year high school in the array is2

advantage:

• Concise code and easy to maintain
• There is a default display
• You can use ng-modal to get the currently selected object accurately

ng-checked

Checkbox and radio are form components we often use. So how to use angularJs to obtain the currently selected object in a simple and convenient way?

Here we will only talk about the usage of angularJs:

The following is still taking grades and classes as examples:

<div ng-repeat="class in " ng-click="class.is_checked=!class.is_checked">
  <input type="checkbox" value="" ng-checked="class.is_checked">
  {{+'class'}}
</div>

Finally, when you need to check which checkboxes are selected, you only need to traverse the $ array to see which objects have the is_checked attribute is true.

The same applies to radio.

The above is the advanced application of ng-options and ng-checked in the form introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!