如何在表單中使用ng-options和ng-checked方法

本篇文章為大家展示了如何在表單中使用ng-options和ng-checked方法，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

ng-options

在select表單控件中，總結一下目前的幾種寫法。

普通寫法

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

優點：簡單

缺點：

• 代碼很不簡潔，如果選項較多就會很亂

• 不方便渲染，如果option在變需要使用js動態加載

• 不方便存儲對象

使用ng-repeat

ng-repeat是angularJS中非常強大的一個directive,在渲染列表上極大的方便了前端開發者，那么由于有多個重復的option,當然可以使用ng-repeat，用法如下：

<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>

優點：

• 代碼簡介

• 可存儲對象，取值方便

缺點：

• 沒有默認顯示！,在有些界面需求中，select可能是需要placeholder一樣的顯示提示效果的，那么使用這個方式顯示效果默認是空白

• 無法通過ng-model來獲取當前選擇的值

使用ng-options

這里使用一個年級、班級的選項來作為例子：即選擇年級之后再顯示對應的可選班級。

<select ng-model="modal.grade" ng-change="modalChangeGrade()" ng-options="grade.gradeText for grade in modal.grades">
  <option value="" disabled>請選擇</option>
</select>
<script>
  $scope.modal.grades = [
  {id:1,gradeText:'初一',classes:[]},
  {id:2,gradeText:'初二',classes:[]},
  {id:3,gradeText:'高一'},classes:[]];
  $scope.modalChangeGrade = function(){
    //班級的HTML片段就不在這里寫了
    $scope.modal.classes = $scope.modal.grade.classes;
  }
</scirpt>

注：

“請選擇"的option需要有value，不然會報錯

如果要設置默認選擇值，比如一開始就選擇"高一"，則需要設置modal在數組里的對象。

$scope.modal.grade = $scope.modal.grades[2];//高一在數組的位置角標為2

優點：

• 代碼簡潔，易于維護

• 有默認顯示

• 可以使用ng-modal準確獲取當前選擇的對象

ng-checked

checkbox和radio是我們經常使用到的表單組件，那么如何使用angularJs簡潔方便的獲取當前已選擇對象呢？

這里只說angularJs的用法：

下面依然以年級和班級為例：

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

最后需要查看有哪些checkbox被選中時，只需要遍歷$scope.grade.classes數組查看有哪些對象的is_checked屬性為true即可。

radio的用法同理。

上述內容就是如何在表單中使用ng-options和ng-checked方法，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。