如何在表單中運用ng-options和ng-checked?

ADVERTISEMENT

如何在表單中運用ng-options和ng-checked?

AngularJS是當前非常的流行的前端框架,它的語法糖非常多,也極大的方便了前端開發者,但是有著用法還是需要去琢磨一下的。

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

優點:簡單

缺點:

  • 代碼很不簡潔,如果選項較多就會很亂
  • 不方便渲染,如果option在變需要使用js動態加載
  • 不方便存儲對象

使用ng-repeat

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


 <select>
 <option ng-repeat="option in options" value="</option>
 </select>
 <script>
 $scope.options = [];
 </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 = [
 ,
 ,
 ,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">
 
 </div>
ADVERTISEMENT

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

radio的用法同理。

以上所述是小編給大家介紹的ng-options和ng-checked在表單中的高級運用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回複大家的。在此也非常感謝大家對路飯網站的支持!


本文地址:
ADVERTISEMENT
ADVERTISEMENT