首页 >

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

web前端|js教程使用AngularJS处理单选框和复选框的简单方法_AngularJS
AngularJS,表单
web前端-js教程
AngularJS对表单的处理相当简单。在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理。
建筑企业网站源码,ubuntu在线翻译,吐鲁番爬虫ip招商,enode php,seo新技巧lzw
使用复选框的的例子有很多,同时我们对它们的处理方式也有很多。这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法。
联机游戏源码,ubuntu加载新内核,形容爬虫的粤语,fetch php,seo公司咨询lzw
创建Angular表单
js秒杀程序源码,ubuntu查内核,tomcat工作组暂缺,粉色小爬虫,php编程培训班,深圳市纯手工seo哪家好lzw
在这篇文章里,我们需要两个文件: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快速地对页面进行布局。

             body     { padding-top:50px; }    form      { margin-bottom:50px; }            
Angular Checkboxes and Radio Buttons
Sample Form Object
    {{ formData }}  

创建完成之后,我们就有了具有name输入的表单了。如果一切都按照我们设想的运行,那么如果你在name输入中键入内容,那么你应当可在下面的

标签段看到所输入的内容了.
复选框

在表单里,复选框非常普遍。下面我们将看看Angular是怎样使用ngModel实现数据绑定的。如果有许多复选框,那么有时在把它绑定到对象的时候如何进行数据处理会让人不知所措。

在我们创建的formData对象的内部,我们还创建了另一个对象。我们把它称为favoriteColors,它请求用户选择最喜欢的颜色:

当用户点击上面复选框中的任意一个时,他们立刻看到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,而是用户自定义的值。

另外,现在我们还在formData对象里增加了一个awesome变量。如果此时设置这个值为true,那么返回的值应该是ofCourse,如果设置为false,那么返回的值为iWish。

复选框

依据 官方说明文档, 这是和单选框不同之处:

需要了解更多有关复选框的信息,请关注Angular 复选框说明文档.
单选按钮

单选按钮比复选框容易些,就在于无需存储多选项数据. 单选就是一个值. 下面添加一个单选按钮看看.

就像这样,单选按钮就绑定到数据对象了.

单选按钮用法

据 官方文档, 这是提供的选项:


使用AngularJS处理单选框和复选框的简单方法_AngularJS
  • AngularJS基础学习笔记之简单介绍_AngularJS
  • AngularJS基础学习笔记之简单介绍_AngularJS | AngularJS基础学习笔记之简单介绍_AngularJS ...

    使用AngularJS处理单选框和复选框的简单方法_AngularJS
  • AngularJS内置指令_AngularJS
  • AngularJS内置指令_AngularJS | AngularJS内置指令_AngularJS ...

    使用AngularJS处理单选框和复选框的简单方法_AngularJS
  • AngularJS实现表单手动验证和表单自动验证_AngularJS
  • AngularJS实现表单手动验证和表单自动验证_AngularJS | AngularJS实现表单手动验证和表单自动验证_AngularJS ...