使用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 相关文章推荐
JavaScript删除数组元素的方法
Mar 20 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
javascript对象的相关操作小结
May 16 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
如何利用React实现图片识别App
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
PHP的几个常用数字判断函数代码
2012/04/24 PHP
php获取远程文件大小
2015/10/20 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JavaScript中常用的验证reg
2016/10/13 Javascript
js实现自定义路由
2017/02/04 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
python 算法 排序实现快速排序
2012/06/05 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
查看keras的默认backend实现方式
2020/06/19 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
《学棋》教后反思
2014/04/14 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
2014年测量员工作总结
2014/12/12 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
运动会运动员赞词
2015/07/22 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python