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


Posted in Javascript onJune 19, 2015

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="//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="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">
Javascript 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
详细分析使用AngularJS编程中提交表单的方式
Jun 19 #Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 #Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 #Javascript
详细解读AngularJS中的表单验证编程
Jun 19 #Javascript
JavaScript中模拟实现jsonp
Jun 19 #Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 #Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 #Javascript
You might like
php 文件上传实例代码
2012/04/19 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
Chrome Web App开发小结
2014/09/04 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
js更优雅的兼容
2010/08/12 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
python 带时区的日期格式化操作
2020/10/23 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
献爱心倡议书
2014/04/14 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
教师自我剖析材料
2014/09/29 职场文书
讲文明倡议书
2015/04/29 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
酒店员工管理制度
2015/08/05 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python