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

AngularJS对表单的处理相当简单。在AngularJS使用双向数据绑定方式进行表单验证的时候，实质上它在帮我们进行表单处理。

使用复选框的的例子有很多，同时我们对它们的处理方式也有很多。这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法。

创建Angular表单

在这篇文章里，我们需要两个文件:index.html和app.js。app.js用来保存所有的Angular代码（它不大），而index.html是动作运行的地方。首先我们创建AngularJS文件。

var formApp = angular.module('formApp',[])

.controller('formController',function($scope) {

// we will store our form data in this object
$scope.formData = {};

});

在这个文件里，我们所做的就是创建Angular应用。其中我们还创建了一个控制器和一个用来保存所有表单数据的对象。

下面我们看看index.html文件，在这个文件里，我们创建了表单，然后进行了数据绑定。我们使用了Bootstrap快速地对页面进行布局。

Angular CheckBoxes and Radio Buttons

<!-- NAME INPUT -->
<div class="form-group"&gt;
  <label>Name</label>
  <input type="text" class="form-control" name="name" ng-model="formData.name"&gt;
</div>

<!-- =============================================== -->
<!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE -->
<!-- =============================================== -->

<!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
<button type="submit" class="btn btn-danger btn-lg"&gt;Send Away!</button>

Sample Form Object

    {{ formData }}

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

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

复选框

在表单里，复选框非常普遍。下面我们将看看Angular是怎样使用ngModel实现数据绑定的。如果有许多复选框，那么有时在把它绑定到对象的时候如何进行数据处理会让人不知所措。

在我们创建的formData对象的内部，我们还创建了另一个对象。我们把它称为favoriteColors，它请求用户选择最喜欢的颜色：

Favorite Colors

Box-inline"> Box" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red Box-inline"> Box" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue Box-inline"> Box" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green

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

创建Angular表单

Angular CheckBoxes and Radio Buttons

Sample Form Object

复选框

复选框点击处理

自定义复选框对应的值

复选框

单选按钮

单选按钮用法

猜你在找的JavaScript相关文章