使用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 相关文章推荐
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
Python读取图片为16进制表示简单代码
2018/01/19 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
JSF界面控制层技术
2013/06/17 面试题
新学期校长寄语
2014/01/18 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
幼教求职信
2014/03/12 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
中学生自我评价2015
2015/03/03 职场文书
聘任书的格式及模板
2019/10/28 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
Java实现注册登录跳转
2022/06/16 Java/Android