ng-options和ng-checked在表單中的高級運(yùn)用(推薦)

更新時(shí)間：2017年01月21日 14:38:28 投稿：mrr

AngularJS是當(dāng)前非常的流行的前端框架，它的語法糖非常多，也極大的方便了前端開發(fā)者。這篇文章主要介紹了ng-options和ng-checked在表單中的高級運(yùn)用,需要的朋友可以參考下

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

ng-options

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

普通寫法

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

優(yōu)點(diǎn)：簡單

缺點(diǎn)：

代碼很不簡潔，如果選項(xiàng)較多就會很亂
不方便渲染，如果option在變需要使用js動(dòng)態(tài)加載
不方便存儲對象

使用ng-repeat

ng-repeat是angularJS中非常強(qiáng)大的一個(gè)directive,在渲染列表上極大的方便了前端開發(fā)者，那么由于有多個(gè)重復(fù)的option,當(dāng)然可以使用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>

優(yōu)點(diǎn)：

代碼簡介
可存儲對象，取值方便

缺點(diǎn)：

沒有默認(rèn)顯示！,在有些界面需求中，select可能是需要placeholder一樣的顯示提示效果的，那么使用這個(gè)方式顯示效果默認(rèn)是空白
無法通過ng-model來獲取當(dāng)前選擇的值

使用ng-options

這里使用一個(gè)年級、班級的選項(xiàng)來作為例子：即選擇年級之后再顯示對應(yīng)的可選班級。

<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，不然會報(bào)錯(cuò)

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

$scope.modal.grade = $scope.modal.grades[2];//高一在數(shù)組的位置角標(biāo)為2

優(yōu)點(diǎn)：

代碼簡潔，易于維護(hù)
有默認(rèn)顯示
可以使用ng-modal準(zhǔn)確獲取當(dāng)前選擇的對象

ng-checked

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

這里只說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被選中時(shí)，只需要遍歷$scope.grade.classes數(shù)組查看有哪些對象的is_checked屬性為true即可。

radio的用法同理。

以上所述是小編給大家介紹的ng-options和ng-checked在表單中的高級運(yùn)用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: