使用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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
JavaScript 事件参考手册
Dec 24 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 Javascript
详细分析使用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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP反射学习入门示例
2019/06/14 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python高并发和多线程有什么关系
2020/11/14 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
高中考试作弊检讨书
2014/01/14 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
2014年收银工作总结
2014/11/13 职场文书
2014年财政局工作总结
2014/12/09 职场文书
英语辞职信怎么写
2015/02/28 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python