使用AngularJS处理单选框和复选框的简单方法_AngularJS

创建完成之后，我们就有了具有name输入的表单了。如果一切都按照我们设想的运行，那么如果你在name输入中键入内容，那么你应当可在下面的

标签段看到所输入的内容了.

 

复选框

在表单里，复选框非常普遍。下面我们将看看Angular是怎样使用ngModel实现数据绑定的。如果有许多复选框，那么有时在把它绑定到对象的时候如何进行数据处理会让人不知所措。
在我们创建的formData对象的内部，我们还创建了另一个对象。我们把它称为favoriteColors，它请求用户选择最喜欢的颜色：

 





当用户点击上面复选框中的任意一个时，他们立刻看到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，而是用户自定义的值。

 





另外，现在我们还在formData对象里增加了一个awesome变量。如果此时设置这个值为true，那么返回的值应该是ofCourse，如果设置为false，那么返回的值为iWish。
复选框
依据 官方说明文档, 这是和单选框不同之处:

 





需要了解更多有关复选框的信息，请关注Angular 复选框说明文档.

单选按钮
单选按钮比复选框容易些，就在于无需存储多选项数据. 单选就是一个值. 下面添加一个单选按钮看看.

 





就像这样，单选按钮就绑定到数据对象了.
单选按钮用法
据 官方文档, 这是提供的选项: