欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【使用AngularJS处理单选框和复选框的简单方法】，下面是详细的讲解！
使用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={};
});
在这个文件里，我们所做的就是创建Angular应用。其中我们还创建了一个控制器和一个用来保存所有表单数据的对象。
下面我们看看index.html文件，在这个文件里，我们创建了表单，然后进行了数据绑定。我们使用了Bootstrap快速地对页面进行布局。
<-- index.html --> <!DOCTYPE html> <html> <head> <!-- CSS --> <!-- load up bootstrap and add some spacing --> <link rel="stylesheet" href="http://www.jb51.net//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="http://www.jb51.net/article/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，它请求用户选择最喜欢的颜色：
<!-- 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，而是用户自定义的值。
<!-- 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。
复选框
依据 官方说明文档, 这是和单选框不同之处:
<input type="radio" ng-model="string" value="string" [name="string"] [ng-change="string"] ng-value="string">
需要了解更多有关复选框的信息，请关注Angular 复选框说明文档.
单选按钮
单选按钮比复选框容易些，就在于无需存储多选项数据. 单选就是一个值. 下面添加一个单选按钮看看.
<!-- 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>
就像这样，单选按钮就绑定到数据对象了.
单选按钮用法
据 官方文档, 这是提供的选项:
<input type="radio"
ng-model="string"
value="string"
[name="string"]
[ng-change="string"]
ng-value="string">
关于使用AngularJS处理单选框和复选框的简单方法的用户互动如下：
相关问题：html中复选框和单选框。
答：checkbox name可以不一样， 不过一般都写一样的。 你提供人家选择的时候你也好取到用户勾选了哪些，radio name一定要一样 才能做二选一. >>详细
相关问题：html单选框和复选框。
答：所谓单选按钮自然是一群里面选择一个 所以名字肯能都是一样的只不过是value不一样而已 而上面那个checkbox 你需要自己给他一个value！ >>详细
相关问题：单选框和复选框的区别是什么？
答：在用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，在HTML的标记中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中的选项用户可以任意选择多项，甚至全眩请看下面的例子: 下面给出... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【ajax】用js来解决ajax读取页面乱码-页面乱码
- 【addEventListener】addEventListener和attachEv
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【browser】jQuery下通过$.browser来判断浏览器.-
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-