使用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 相关文章推荐
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
解析原生JS getComputedStyle
May 25 Javascript
vue基于Teleport实现Modal组件
May 31 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翻页类
2009/06/01 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
Jquery cookie操作代码
2010/03/14 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
python装饰器使用实例详解
2019/12/14 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
函授毕业生的自我鉴定
2013/11/26 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
工作失误检讨书范文
2015/01/26 职场文书
公积金具结保证书
2015/05/11 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书