Advanced Use of ng options and ng checked in Forms of Recommendation

AngularJS is a very popular front-end framework at present. It has a lot of grammar sugar, which is also very convenient for front-end developers, but it still needs to ponder its usage.

ng-options

In the select form control, summarize several current writing methods under 1.

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

Disadvantages:

The code is not concise, and it will be messy if there are many options It is inconvenient to render, if option needs to be dynamically loaded with js Inconvenient to store objects

Use ng-repeat

ng-repeat is a very powerful directive in angularJS, which greatly facilitates the front-end developers on the rendering list. Since there are multiple repeated option, of course, ng-repeat can be used, and 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 It can store objects and take values conveniently

Disadvantages:

There is no default display! In some interface requirements, select may need placeholder1-like display effect, so the display effect is blank by default Unable to get the currently selected value through ng-model

Use ng-options

Here, use the option of one grade and class as an example: that is, select the 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> Please select </option>
</select>
<script>
  $scope.modal.grades = [
  {id:1,gradeText:' At the beginning 1',classes:[]},
  {id:2,gradeText:' At the beginning 2',classes:[]},
  {id:3,gradeText:' Gao 1'},classes:[]];
  $scope.modalChangeGrade = function(){
    // Class HTML The fragment will not be written here 
    $scope.modal.classes = $scope.modal.grade.classes;
  }
</scirpt>

Note:

value is required for "please select" option, otherwise an error will be reported

If you want to set the default selection value, such as "High 1" at the beginning of 1, you need to set the objects of modal in the array.

$scope.modal.grade = $scope.modal.grades[2];// Gao 1 At the position of the array, the angle is marked as 2

Advantages:

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

ng-checked

checkbox and radio are form components that we often use, so how to use angularJs to get the currently selected objects simply and conveniently?

Only the usage of angularJs is mentioned here:

Let's still take grades and classes as examples:

<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+' Class '}}
</div>

Finally, when you need to see which checkbox is selected, you only need to traverse the $scope. grade. classes array to see which objects have the is_checked attribute of true.

The same applies to radio.