快捷導(dǎo)航

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

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

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

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

ng-options

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

普通寫(xiě)法

<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)：簡(jiǎn)單

缺點(diǎn)：

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

使用ng-repeat

ng-repeat是angularJS中非常強(qiáng)大的一個(gè)directive,在渲染列表上極大的方便了前端開(kāi)發(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)：

代碼簡(jiǎn)介
可存儲(chǔ)對(duì)象，取值方便

缺點(diǎn)：

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

使用ng-options

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

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

注：

“請(qǐng)選擇"的option需要有value，不然會(huì)報(bào)錯(cuò)

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

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

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

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

ng-checked

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

這里只說(shuō)angularJs的用法：

下面依然以年級(jí)和班級(jí)為例：

<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ù)組查看有哪些對(duì)象的is_checked屬性為true即可。

radio的用法同理。

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

您可能感興趣的文章: