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

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

AngularJS is a very popular front-end framework. It has a lot of syntactic sugar and greatly facilitates front-end developers. However, you still need to think about its usage.

Ng-options

In the select Form Control, summarize the current several statements.

Normal writing

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

Advantage: simple

Disadvantages:

• The code is not concise. If there are many options, it will be messy.
• Rendering is not convenient. If option is changing, JavaScript dynamic loading is required.
• Inconvenient to store objects

Use ng-repeat

Ng-repeat is a very powerful direve VE in angularJS, which greatly facilitates front-end developers in the rendering list. Therefore, you can use ng-repeat because there are multiple repeated options, the usage is as follows:

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

Advantages:

• Code Introduction
• Objects that can be stored, with convenient values

Disadvantages:

• No Default display !, In some interface requirements, select may require the same display effect as placeholder, so the display effect in this mode is blank by default.
• You cannot use ng-model to obtain the selected value.

Use ng-options

Here we use a grade and class option as an example: select a grade and then display the corresponding Optional Class.

<Select ng-model = "modal. grade "ng-change =" modalChangeGrade () "ng-options =" grade. gradeText for grade in modal. grades "> <option value =" "disabled> select </option> </select> <script> $ scope. modal. grades = [{id: 1, gradeText: '', classes: []}, {id: 2, gradeText: '', classes: []}, {id: 3, gradeText: '1100'}, classes: []; $ scope. modalChangeGrade = function () {// The class's HTML snippets are not written here $ scope. modal. classes = $ scope. modal. grade. classes ;}</scirpt>

Note:

The option of "Please select" requires a value. Otherwise, an error will be reported.

If you want to set the default value, for example, to select "" at the beginning, you need to set the modal object in the array.

$ Scope. modal. grade = $ scope. modal. grades [2]; // the level 1 in the array is marked as 2

Advantages:

• Simple and easy to maintain code
• Display by default
• You can use ng-modal to accurately obtain the selected object.

Ng-checked

Checkbox and radio are frequently used form components. How can we use angularJs to easily and easily obtain selected objects?

Here we only talk about angularJs usage:

The following uses the grade and class as an example:

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

Finally, to check which checkboxes are selected, you only need to traverse the $ scope. grade. classes array to check which objects have the is_checked attribute of true.

The usage of radio is the same as that of radio.

The above section describes the advanced use of ng-options and ng-checked in the form. I hope this will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!