AngularJS makes dealing with forms extremely easy. When it comes to two-way data-binding to the way it helps us handle form validation, Angular really helps us process forms.
We’ve written in the past on the great features of Angular in forms and how to process forms. Today will be a quick tutorial on dealing with checkboxes and radio buttons in Angular forms.
There are many different use cases for checkboxes and many different ways we can process them. We’ll take a look at the ways to bind checkboxes and radio buttons to data variables and the ways we can tweak them.
譯者信息AngularJS對(duì)表單的處理相當(dāng)簡(jiǎn)單。在AngularJS使用雙向數(shù)據(jù)綁定方式進(jìn)行表單驗(yàn)證的時(shí)候，實(shí)質(zhì)上它在幫我們進(jìn)行表單處理。
以前，我曾經(jīng)寫過AngularJS在表單處理方面的強(qiáng)大功能以及如何進(jìn)行表單處理的文章。今天，我們將快速瀏覽一下AngularJS是如何對(duì)表單中的復(fù)選框和單選按鈕進(jìn)行處理的。
使用復(fù)選框的的例子有很多，同時(shí)我們對(duì)它們的處理方式也有很多。這篇文章中我們將看一看把復(fù)選框和單選按鈕同數(shù)據(jù)變量綁定的方法和我們對(duì)它的處理辦法。
For this tutorial, we will need 2 files. index.html and app.js. app.js will hold all of our Angular code (it won’t be much) and index.html will be where all the action happens. Let’s create our AngularJS file first.
// app.jsvar formApp = angular.module('formApp', []) .controller('formController', function($scope) { // we will store our form data in this object $scope.formData = {}; }); All we do in this file is set up our Angular application. We will also create a controller and an object to hold all of our form data.
Now let’s look at our index.html file where we will create our form and do all of our data binding. We’ll be using Bootstrap to help speed up our stylings.
<-- index.html --><!DOCTYPE html><html><head> <!-- CSS --> <!-- load up bootstrap and add some spacing --> <link rel="stylesheet" >Send Away!</button> </form> <!-- SHOW OFF OUR FORMDATA OBJECT --> <h2>Sample Form Object</h2> <pre> {{ formData }} </pre> </div></body></html> With this setup, we will now have our form ready to go with a name input. If all went according to plan, if you type into that name input, you should see your data populate in the <pre> tag below.
在這篇文章里，我們需要兩個(gè)文件:index.html和app.js。app.js用來保存所有的Angular代碼（它不大），而index.html是動(dòng)作運(yùn)行的地方。首先我們創(chuàng)建AngularJS文件。
// app.jsvar 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è)用來保存所有表單數(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" >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)容了.
Checkboxes are extremely common in any form. Let’s look at how Angular binds their data using ngModel. When there are many checkboxes, sometimes it can be confusing to now how to handle that data when binding it to an object.
Inside of the formData object we created, we will create another object. Let’s call this one favoriteColors and ask our user what their favorite colors are.
<!-- 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>
When a user clicks on one of the checkboxes, they will see that the formData object immediately changes. We are housing the values for our checkboxes in the formData.favoriteColors object and this is how we will pass data of our checkboxes to our server.
在表單里，復(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ù)器了。
Sometimes you will need to process something when somebody clicks a checkbox. This could be something like doing a calculation, changing some variables, or whatever data-binding things you need to do. To do this, you would create a function inside of app.js using $scope.yourFunction = function() {};. Then you would use ng-click="yourFunction()" on your checkbox to call that function.
There are many different uses for this in forms and Angular provides a very easy way to call custom functions using ng-click.
有時(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()"來調(diào)用這個(gè)函數(shù)了。
處理表單復(fù)選框的方法有許多種，Angular提供了一個(gè)非常簡(jiǎn)單的方法：使用ng-click調(diào)用用戶自定義的函數(shù)。
By default, bound checkboxes will return true or false. Sometimes we want to return different values. Angular provides a great way to do this using ng-true-value and ng-false-value.
Let’s add another set of checkboxes, but this time, instead of true or false, we will use custom values.
<!-- 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>
With this addition, we now have an awesome variable in our formData object. If this is set to true, the value will be ofCourse and if set to false, the value will be iWish.
默認(rèn)情況下，綁定到復(fù)選框上的值是ture或者false。有時(shí)候，我們希望返回的其它值。Angular提供了一種非常好的處理方式：使用ng-ture-value和ng-false-value。
我們添加另外一組復(fù)選框，不過這時(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。
Per the official docs, here are the different things you are able to do with radio buttons:
<input type="radio" ng-model="string" value="string" [name="string"] [ng-change="string"] ng-value="string">
For more information on the things you can do with checkboxes, read the Angular input[checkbox] docs.
Radio buttons are a little bit easier than checkboxes since we don’t have to store multiple values. A radio button will just be one value since you can only select one thing. Let’s add in radio boxes and see how they are data-bound.
<!-- 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>
Just like that, our radio buttons are now bound to our formData object.
依據(jù) 官方說明文檔, 這是和單選框不同之處:
<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ù)選框說明文檔.
單選按鈕比復(fù)選框容易些，就在于無需存儲(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ì)象了.
Per the official docs, here are the different things you are able to do with radio buttons:
<input type="radio" ng-model="string" value="string" [name="string"] [ng-change="string"] ng-value="string">
For more information on the things you can do with radio buttons, read the Angular input[radio] docs.
As you can see, binding checkboxes and radio buttons using Angular is a fairly easy process. There is also a lot of flexibility when you want to change parts of your application or create specialized checkbox or radio buttons.
View Code : http://plnkr.co/edit/g0NMG4rmF4uwzoG2uZhf?p=preview
譯者信息據(jù) 官方文檔, 這是提供的選項(xiàng):
<input type="radio" ng-model="string" value="string" [name="string"] [ng-change="string"] ng-value="string">
更多內(nèi)容，請(qǐng)閱讀 Angular 單選按鈕文檔.
正如你所見，使用Angular綁定復(fù)選框和單選按鈕都是十分簡(jiǎn)單的. 在創(chuàng)建更具個(gè)性的復(fù)選框或是單選按鈕時(shí)，它也有很大的靈活性.
聯(lián)系客服
