這篇文章主要介紹了使用AngularJS處理單選框和復選框的方法,在AngularJS表單的基礎之上編寫起來非常簡單,需要的朋友可以參考下
AngularJS對表單的處理相當簡單。在AngularJS使用雙向數據綁定方式進行表單驗證的時候，實質上它在幫我們進行表單處理。
使用復選框的的例子有很多，同時我們對它們的處理方式也有很多。這篇文章中我們將看一看把復選框和單選按鈕同數據變量綁定的方法和我們對它的處理辦法。
創建Angular表單
在這篇文章裡，我們需要兩個文件:index.html和app.js。app.js用來保存所有的Angular代碼（它不大），而index.html是動作運行的地方。首先我們創建AngularJS文件。
?
1
2
3
4
5
6
7
8
9
10
// app.js
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
});
在這個文件裡，我們所做的就是創建Angular應用。其中我們還創建了一個控制器和一個用來保存所有表單數據的對象。
下面我們看看index.html文件，在這個文件裡，我們創建了表單，然後進行了數據綁定。我們使用了Bootstrap快速地對頁面進行布局。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<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>
創建完成之後，我們就有了具有name輸入的表單了。如果一切都按照我們設想的運行，那麼如果你在name輸入中鍵入內容，那麼你應當可在下面的<pre>標簽段看到所輸入的內容了.
復選框
在表單裡，復選框非常普遍。下面我們將看看Angular是怎樣使用ngModel實現數據綁定的。如果有許多復選框，那麼有時在把它綁定到對象的時候如何進行數據處理會讓人不知所措。
在我們創建的formData對象的內部，我們還創建了另一個對象。我們把它稱為favoriteColors，它請求用戶選擇最喜歡的顏色：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 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>
當用戶點擊上面復選框中的任意一個時，他們立刻看到formData對象發生了變更。我們把復選框的值存儲到fromData.favoriteColors對象裡。這樣我們就把復選框的值傳遞給了服務器了。
復選框點擊處理
有時候，當某人點擊了復選框後，你需要對其進行處理。你需要做的處理可能如下：計算某個值，更改某些變量或者進行數據綁定。要實現這些，你要使用$scope.yourFunction = function() {};在app.js內創建函數。接著你就可以在的的復選框上使用ng-click="yourFunction()"來調用這個函數了。
處理表單復選框的方法有許多種，Angular提供了一個非常簡單的方法：使用ng-click調用用戶自定義的函數。
自定義復選框對應的值
默認情況下，綁定到復選框上的值是ture或者false。有時候，我們希望返回的其它值。Angular提供了一種非常好的處理方式：使用ng-ture-value和ng-false-value。
我們添加另外一組復選框，不過這時侯我們使用的不再是true或者false，而是用戶自定義的值。
?
1
2
3
4
5
6
7
8
<!-- 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>
另外，現在我們還在formData對象裡增加了一個awesome變量。如果此時設置這個值為true，那麼返回的值應該是ofCourse，如果設置為false，那麼返回的值為iWish。
復選框
依據 官方說明文檔, 這是和單選框不同之處:
?
1
2
3
4
5
6
<input type="radio"
ng-model="string"
value="string"
[name="string"]
[ng-change="string"]
ng-value="string">
需要了解更多有關復選框的信息，請關注Angular 復選框說明文檔.
單選按鈕
單選按鈕比復選框容易些，就在於無需存儲多選項數據. 單選就是一個值. 下面添加一個單選按鈕看看.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 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>
就像這樣，單選按鈕就綁定到數據對象了.
單選按鈕用法
據 官方文檔, 這是提供的選項:
?
1
2
3
4
5
6
<input type="radio"
ng-model="string"
value="string"
[name="string"]
[ng-change="string"]
ng-value="string">