AngularJS對(duì)表單的處理相當(dāng)簡(jiǎn)單。在AngularJS使用雙向數(shù)據(jù)綁定方式進(jìn)行表單驗(yàn)證的時(shí)候，實(shí)質(zhì)上它在幫我們進(jìn)行表單處理。
使用復(fù)選框的的例子有很多，同時(shí)我們對(duì)它們的處理方式也有很多。這篇文章中我們將看一看把復(fù)選框和單選按鈕同數(shù)據(jù)變量綁定的方法和我們對(duì)它的處理辦法。
創(chuàng)建Angular表單
在這篇文章里，我們需要兩個(gè)文件:index.html和app.js。app.js用來(lái)保存所有的Angular代碼（它不大），而index.html是動(dòng)作運(yùn)行的地方。首先我們創(chuàng)建AngularJS文件。
// app.js var formApp = angular.module('formApp', []) .controller('formController', function($scope) { // we will store our form data in this object $scope.formData = {}; });在這個(gè)文件里，我們所做的就是創(chuàng)建Angular應(yīng)用。其中我們還創(chuàng)建了一個(gè)控制器和一個(gè)用來(lái)保存所有表單數(shù)據(jù)的對(duì)象。
下面我們看看index.html文件，在這個(gè)文件里，我們創(chuàng)建了表單，然后進(jìn)行了數(shù)據(jù)綁定。我們使用了Bootstrap快速地對(duì)頁(yè)面進(jìn)行布局。
<-- index.html --><!DOCTYPE html><html><head> <!-- CSS --> <!-- load up bootstrap and add some spacing --> <link rel="stylesheet" > <style> body { padding-top:50px; } form { margin-bottom:50px; } </style> <!-- JS --> <!-- load up angular and our custom script --> <script src="http://code.angularjs.org/1.2.13/angular.js"></script> <script src="app.js"></script></head> <!-- apply our angular app and controller --><body ng-app="formApp" ng-controller="formController"><div class="col-xs-12 col-sm-10 col-sm-offset-1"> <h2>Angular Checkboxes and Radio Buttons</h2> <form> <!-- NAME INPUT --> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" name="name" ng-model="formData.name"> </div> <!-- =============================================== --> <!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE --> <!-- =============================================== --> <!-- SUBMIT BUTTON (DOESNT DO ANYTHING) --> <button type="submit" class="btn btn-danger btn-lg">Send Away!</button> </form> <!-- SHOW OFF OUR FORMDATA OBJECT --> <h2>Sample Form Object</h2> <pre> {{ formData }} </pre> </div></body></html>創(chuàng)建完成之后，我們就有了具有name輸入的表單了。如果一切都按照我們?cè)O(shè)想的運(yùn)行，那么如果你在name輸入中鍵入內(nèi)容，那么你應(yīng)當(dāng)可在下面的<pre>標(biāo)簽段看到所輸入的內(nèi)容了.
復(fù)選框
在表單里，復(fù)選框非常普遍。下面我們將看看Angular是怎樣使用ngModel實(shí)現(xiàn)數(shù)據(jù)綁定的。如果有許多復(fù)選框，那么有時(shí)在把它綁定到對(duì)象的時(shí)候如何進(jìn)行數(shù)據(jù)處理會(huì)讓人不知所措。
在我們創(chuàng)建的formData對(duì)象的內(nèi)部，我們還創(chuàng)建了另一個(gè)對(duì)象。我們把它稱為favoriteColors，它請(qǐng)求用戶選擇最喜歡的顏色：
<!-- MULTIPLE CHECKBOXES --><label>Favorite Colors</label><div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red </label> <label class="checkbox-inline"> <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue </label> <label class="checkbox-inline"> <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green </label></div>
當(dāng)用戶點(diǎn)擊上面復(fù)選框中的任意一個(gè)時(shí)，他們立刻看到formData對(duì)象發(fā)生了變更。我們把復(fù)選框的值存儲(chǔ)到fromData.favoriteColors對(duì)象里。這樣我們就把復(fù)選框的值傳遞給了服務(wù)器了。
復(fù)選框點(diǎn)擊處理
有時(shí)候，當(dāng)某人點(diǎn)擊了復(fù)選框后，你需要對(duì)其進(jìn)行處理。你需要做的處理可能如下：計(jì)算某個(gè)值，更改某些變量或者進(jìn)行數(shù)據(jù)綁定。要實(shí)現(xiàn)這些，你要使用$scope.yourFunction = function() {};在app.js內(nèi)創(chuàng)建函數(shù)。接著你就可以在的的復(fù)選框上使用ng-click="yourFunction()"來(lái)調(diào)用這個(gè)函數(shù)了。
處理表單復(fù)選框的方法有許多種，Angular提供了一個(gè)非常簡(jiǎn)單的方法：使用ng-click調(diào)用用戶自定義的函數(shù)。
自定義復(fù)選框?qū)?yīng)的值
默認(rèn)情況下，綁定到復(fù)選框上的值是ture或者false。有時(shí)候，我們希望返回的其它值。Angular提供了一種非常好的處理方式：使用ng-ture-value和ng-false-value。
我們添加另外一組復(fù)選框，不過(guò)這時(shí)侯我們使用的不再是true或者false，而是用戶自定義的值。
<!-- CUSTOM VALUE CHECKBOXES --><label>Personal Question</label><div class="checkbox"> <label> <input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish"> Are you awesome? </label></div>
另外，現(xiàn)在我們還在formData對(duì)象里增加了一個(gè)awesome變量。如果此時(shí)設(shè)置這個(gè)值為true，那么返回的值應(yīng)該是ofCourse，如果設(shè)置為false，那么返回的值為iWish。
復(fù)選框
依據(jù) 官方說(shuō)明文檔, 這是和單選框不同之處:
<input type="radio" ng-model="string" value="string" [name="string"] [ng-change="string"] ng-value="string">
需要了解更多有關(guān)復(fù)選框的信息，請(qǐng)關(guān)注Angular 復(fù)選框說(shuō)明文檔.
單選按鈕
單選按鈕比復(fù)選框容易些，就在于無(wú)需存儲(chǔ)多選項(xiàng)數(shù)據(jù). 單選就是一個(gè)值. 下面添加一個(gè)單選按鈕看看.
<!-- RADIO BUTTONS --><label>Chicken or the Egg?</label><div class="form-group"> <div class="radio"> <label> <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg"> Chicken </label> </div> <div class="radio"> <label> <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg"> Egg </label> </div></div>
就像這樣，單選按鈕就綁定到數(shù)據(jù)對(duì)象了.
單選按鈕用法
據(jù) 官方文檔, 這是提供的選項(xiàng):
<input type="radio" ng-model="string" value="string" [name="string"] [ng-change="string"] ng-value="string">
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
