AngularJS对表单的处理相当简单。在AngularJS使用双向数据绑定方式进行表单验证的时候，实质上它在帮我们进行表单处理。
今天，我们将快速浏览一下AngularJS是如何对表单中的复选框和单选按钮进行处理的。
使用复选框的的例子有很多，同时我们对它们的处理方式也有很多。这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法。
一.创建Angular表单
在这篇文章里，我们需要两个文件：index.html和app.js。app.js用来保存所有的Angular代码（它不大），而index.html是动作运行的地方。首先我们创建AngularJS文件。
// app.js
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
$scope.formData.chickenEgg = 'egg';
$scope.formData.favoriteColors = {red: true, blue: false, green: true};
});
在这个文件里，我们所做的就是创建Angular应用。其中我们还创建了一个控制器和一个用来保存所有表单数据的对象。
下面我们看看index.html文件，在这个文件里，我们创建了表单，然后进行了数据绑定。我们使用了Bootstrap快速地对页面进行布局。
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="bootstrap3.1.1.css">
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="angular1.2.13.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，它请求用户选择最喜欢的颜色：
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="bootstrap3.1.1.css">
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="angular1.2.13.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">
<!-- 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>
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>formData.favoriteColors</h2>
<pre>
{{ formData.favoriteColors }}
</pre>
</div>
</body>
</html>
当用户点击上面复选框中的任意一个时，他们立刻看到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，而是用户自定义的值。
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="bootstrap3.1.1.css">
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="angular1.2.13.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">
<!-- 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>
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>formData.awesome</h2>
<pre>
{{ formData.awesome }}
</pre>
</div>
</body>
</html>
另外，现在我们还在formData对象里增加了一个awesome变量。如果此时设置这个值为true，那么返回的值应该是ofCourse，如果设置为false，那么返回的值为iWish。
复选框
依据官方说明文档，这是和单选框不同之处：
<input type="radio" ng-model="string" value="string" [name="string"] [ng-change="string"] ng-value="string">
需要了解更多有关复选框的信息，请关注Angular 复选框说明文档.
三.单选按钮
单选按钮比复选框容易些，就在于无需存储多选项数据。单选就是一个值，下面添加一个单选按钮看看。
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="bootstrap3.1.1.css">
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="angular1.2.13.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">
<!-- 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>
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>formData.chickenEgg</h2>
<pre>
{{ formData.chickenEgg }}
</pre>
</div>
</body>
</html>
就像这样，单选按钮就绑定到数据对象了。
单选按钮用法
据官方文档，这是提供的选项：
<input type="radio"
ng-model="string"
value="string"
[name="string"]
[ng-change="string"]
ng-value="string">
更多内容，请阅读Angular单选按钮文档。
四.小结
正如你所见，使用Angular绑定复选框和单选按钮都是十分简单的，在创建更具个性的复选框或是单选按钮时，它也有很大的灵活性。
文章来源：http://www.oschina.net/translate/handling-checkboxes-and-radio-buttons-in-angular-forms
相关推荐
在开发过程中，我们经常需要处理用户的选择输入，这通常涉及单选按钮（Radio）和复选框（Checkbox）。本文将深入探讨AngularJS中如何使用这两种元素，并提供实例代码来帮助理解。 ### 1. AngularJS 单选按钮（Radio...
在AngularJS中，处理单选框（radio buttons）和复选框（checkboxes）是非常直观且高效的。AngularJS的核心特性之一就是双向数据绑定，这使得表单元素与应用程序的数据模型之间能够实时同步，大大简化了表单管理和...
本篇文章主要探讨了如何在AngularJS中利用ng-model指令实现单选框（type="radio"）和多选框（type="checkbox"）的双向动态绑定。 一、ng-model指令 ng-model是AngularJS中用于数据绑定的关键指令，它允许我们将表单...
├最新AngularJS开发宝典—第010讲 实例讲解angular操作checkbox复选框.mp4 ├最新AngularJS开发宝典—第011讲 实例讲解angular操作select列表框.mp4 ├最新AngularJS开发宝典—第012讲 函数使用方法大小写转换与...
ng-model通常用于文本输入、复选框、单选按钮等，它会捕获用户输入并更新模型。而ng-value则更倾向于设置输入元素的初始值，不涉及用户的交互变化。 4. **应用实例** 在实际开发中，ng-value常用于预填充表单字段...
5. **可配置属性**：可以设置各种配置参数，比如是否显示复选框、是否开启搜索、默认选中项等，以满足不同的应用场景。 在`angularjs-dropdown-multiselect-master`文件夹中，我们可以预期找到以下几个关键文件： ...
3. 表单：预定义的输入框、单选按钮、复选框、表单控件的样式。 4. 按钮：多种颜色和大小的按钮样式。 5. 导航组件：菜单、面包屑、分页、导航条、标签页和下拉菜单。 6. 辅助类：帮助创建响应式布局和间距的实用...
Bootstrap Switch是这个框架的一个扩展，它将传统的复选框或单选按钮转换为视觉效果更佳的切换开关，提供了一种更直观的方式来切换状态。 在"angular-bootstrap-switch"项目中，这个功能被封装成一个AngularJS指令...
`allOrcan`和`oneCheck`指令则用于处理全选和单选操作，它们会根据复选框的状态来更新商品的选择状态，并触发总价的更新。 此示例代码中还包含了一段用于引入jQuery和AngularJS的HTML代码。这是因为示例的某些操作...
复选框（checkbox）的值在AngularJS中表现为 true 或 false。使用 ng-model 指令可以绑定复选框，获取用户是否勾选了复选框的状态。这在表单中用来表示简单的二选一问题或多项选择问题非常有效。 实现AngularJS表单...
ng-checked指令是用于在AngularJS中动态控制复选框(checkbox)或单选按钮(radio)的选中状态。当你需要根据数据模型(model)中某个变量的真值(true)或假值(false)来设置元素的checked属性时，ng-checked就显得非常有用...
在IT行业中，"ShopCartSelectAll"这个主题通常涉及到电商应用或者购物车系统中的复选框选择功能。在这个场景下，用户可以通过点击不同的复选框来选择或取消选择商品，以便进行购买操作。以下是关于这一功能实现的...
比如文本输入框（input[type="text"]）、单选按钮（input[type="radio"]）、复选框（input[type="checkbox"]）等，都可以通过browserTrigger来模拟用户的行为。 browserTrigger的一个重要特性是它加入了很多浏览器...
- **AngularJS 表单处理**：`ng-checked` 和 `ng-selected` 与 `angular.forEach` 结合使用，可以方便地处理表单中的复选框和单选按钮。 - **Angular 2+**：在 Angular 2 及更高版本中，虽然没有 `angular.forEach`...
在本篇文章中，我们将深入探讨jQuery的一些常见方法，这些方法对于前端开发人员来说非常实用，包括根据value选中单选框、复选框，以及操作select标签等功能。** 1. **选择器：** jQuery 的核心在于它的选择器，它...
ng-model指令不仅限于文本框元素，它也可以用在其他表单元素上，如复选框、单选按钮和下拉列表等。当表单元素的值发生变化时，ng-model会监听这些变化并同步更新模型中的数据，同时也同步更新视图。 需要注意的是，...
在AngularJS中，`ng-disabled`是一个非常有用的指令，它允许动态地禁用或启用HTML表单中的元素，如输入框、单选按钮、复选框、选择列表等。这个指令是基于AngularJS的数据绑定机制工作的，使得我们可以根据应用程序...