实践中学习AngularJS表单
表单是最常用的一种组建。在Angular.js中,其实并没有单独的为表单添加多少特殊功能。但是,利用Angular.js框架本身的特点,可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的。
1.根据输入域数据实时更新输出数据
下面代吗实现了一个简易的计算表单,它能将用户输入的数据进行处理,并且实时显示在表单输出域中:
<div ng-app="" ng-init="quantity=1;price=5"> 数量: <input type="number" ng-model="quantity"> 价格: <input type="number" ng-model="price"> <p><b>总价:</b> {{ quantity * price }}</p> </div>
通过定义两个ng-model,将用户输入的数据进行实时监听,并且利用{{}}进行数据的调用,拥几行代码就完成了一个建议的计算表单功能。
2.实现表单重置功能
下面的代码实现了一个表单中经常使用的功能:重置表单。
HTML代码:
<div ng-app="myApp" ng-controller="formCtrl"> <form> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user}}</p> </div>
JS代码:
var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName: "John", lastName: "Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); });
在JS控制器代码中,我们定义了master对象,用来存放初始时刻表单输入框的值。我们定义了一个reset()方法,该方法执行后,利用angular.copy方法,将master中的值赋值给user,利用这样的方法实现了表单域的重置。在HTML代码中,我们使用ng-click鼠标点击事件触发reset()函数,从而实现我们的功能。
3.实现表单下拉菜单选择域功能
在Angular中,实现下拉菜单很简单。我们可以利用ng-repeat指令来方便的实现一个下拉菜单:
首先,在js的模型中定义数据,数据格式如下:
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; });
然后,我们在html中,利用ng-repeat进行模型中数据的读取(具体含义见之前博客)
<div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select> </div>
关于下拉菜单,还涉及到从数据库、远程等读取数据,此外还有其他方法实现下拉菜单。这些将在之后进行讨论。
相关推荐
-
AngularJS实现表单验证
虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p&
-
AngularJS的表单使用详解
AngularJS提供丰富填写表单和验证.我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式.使用novalidate表单声明禁止任何浏览器特定的验证.表单控件使用了大量的角活动.让我们快速浏览一下有关事件先. 事件 AngularJS提供可与HTML控件相关联的多个事件.例如ng-click通常与按钮相关联.以下是AngularJS支持的事件. ng-click ng-dbl-click ng-mousedown ng-
-
AngularJS手动表单验证
所谓手动验证是通过AngularJS表单的属性来验证,而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm", 如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1"> <head> <meta charset="
-
详解AngularJS实现表单验证
开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex
-
AngularJS实现表单手动验证和表单自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 一.手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件: 1.给form元素加上novalidate="novalidate": 2.给form元素加上name="theForm",如下: <!DOCTYPE html> <html lang="en" ng-app="myApp1&quo
-
AngularJS表单和输入验证实例
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告. 注意:客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的. 1.HTML 控件 以下 HTML input 元素被称为 HTML 控件:input 元素.select 元素.button 元素.textarea 元素. 2.HTML 表单 AngularJS 表单是输入控件的集合.HTML 表单通常与 HTML 控件同时存在. <!DOCTYPE html> <html> <
-
详细分析使用AngularJS编程中提交表单的方式
在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理
-
详细解读AngularJS中的表单验证编程
需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的目标了吧,让我们一起来构建这个东西吧. Angular 的表单属性 $valid, $invalid, $pristine, $dirty Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和
-
AngularJS入门教程之表单校验用法示例
本文实例讲述了AngularJS表单校验用法.分享给大家供大家参考,具体如下: 表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面的校验.如果对HTTP协议比较熟,甚至还可以在程序中手动构造一段HTTP请求发到服务器,所以服务器端的数据校验绝对是必不可少的. WEB前端数据校验的意义在于改善用户体验,用户不用等到將数据提交到服务器后才知道哪些数据是
-
实践中学习AngularJS表单
表单是最常用的一种组建.在Angular.js中,其实并没有单独的为表单添加多少特殊功能.但是,利用Angular.js框架本身的特点,可以更友好的呈现表单.下面将介绍几种常用的功能在Angular中是如何巧妙实现的. 1.根据输入域数据实时更新输出数据 下面代吗实现了一个简易的计算表单,它能将用户输入的数据进行处理,并且实时显示在表单输出域中: <div ng-app="" ng-init="quantity=1;price=5"> 数量: <i
-
AngularJs表单验证实例代码解析
常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.
-
AngularJS表单基本操作
本文实例为大家分享了AngularJS表单简单操作代码,供大家参考,具体内容如下 HTML正文: <div ng-app="myApp" ng-controller="myCtrl"> <!-- novalidate:当提交表单时不对表单数据(输入)进行验证 --> <form novalidate> First Name:<input type="text" ng-model="user.fi
-
AngularJs表单校验功能实例代码
废话不多说了,具体代码如下所示: <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <link rel="stylesheet" href="../css/bootstrap.min.cs
-
AngularJS表单提交实例详解
本文实例讲述了AngularJS表单提交.分享给大家供大家参考,具体如下: AngularJS中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的. ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因.只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响. 当AngularJS认为某个值可能发生变化时,它会运行
-
在Django同1个页面中的多表单处理详解
快速上手Django实现项目 近期公司在做1个海淘的项目,APP为pylot.由于时间比较赶,加上隔壁那哥们不在,只能自己挑大梁了.结果,当项目做出来之后,被领导狠狠的批了一顿,说怎么用django写,你能解决Django的内存问题吗,你能解决并发的问题吗?Django那么重. 然后我只好回答说,正是因为它重,所以人家拿来写大型项目.虽然这里不是为了上面这2个问题的,而是来说下如何快速开发原型的问题. 对于Django这样基于模型的Web框架,实话说真的解决了很多繁琐的工作.由于它1个模型对应1
-
在Python的Flask中使用WTForms表单框架的基础教程
下载和安装 安装 WTForms 最简单的方式是使用 easy_install 和 pip: easy_install WTForms # or pip install WTForms 你可以从 PyPI 手动 下载 WTForms 然后运行 python setup.py install . 如果你是那种喜欢这一切风险的人, 就运行来自 Git 的最新版本, 你能够获取最新变更集的 打包版本, 或者前往 项目主页 克隆代码仓库. 主要概念 Forms 类是 WTForms 的核心容器. 表单(
-
AngularJS表单详解及示例代码
AngularJS提供丰富填写表单和验证.我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式.使用novalidate表单声明禁止任何浏览器特定的验证.表单控件使用了大量的角活动.让我们快速浏览一下有关事件先. 事件 AngularJS提供可与HTML控件相关联的多个事件.例如ng-click通常与按钮相关联.以下是AngularJS支持的事件. ng-click ng-dbl-click ng-mousedown ng-
-
AngularJS表单验证功能分析
本文实例讲述了AngularJS表单验证功能.分享给大家供大家参考,具体如下: 在AngularJS的管辖下,每个表单form都会创建一个ngFormController的一个实例.在表单里面的每个input都会创建一个在这个实例下的ngModelController实例,用以控制每个input的行为. 首先先从简单的验证开始. AngularJs的ngModelController提供了几种属性:$pristine;$dirty;$valid;$invalid;$error pristine:
随机推荐
- ISO-8859-1 、Latin-1 西欧编码介绍及应用
- Oracle数据库集复制方法浅议
- 图解Eclipse在线安装ADT插件过程
- java基本教程之线程让步 java多线程教程
- mysql记录根据日期字段倒序输出
- 详解nodejs中的process进程
- js实现表单提交后不重新刷新当前页面
- csh脚本语法实例
- js调用后台、后台调用前台等方法总结
- IIS6 ASP 页的执行造成响应缓冲区超过其配置限制的解决方法
- 基于javaWeb 项目SSM配置要点及可能遇到的问题和解决方法
- c# GridControl的模糊查询实现代码
- android图片处理 让图片变成圆形
- python解析html提取数据,并生成word文档实例解析
- java中staticclass静态类详解
- Linux shell命令用法及常见用例之tar命令
- Django Rest framework解析器和渲染器详解
- django框架创建应用操作示例
- 详解Ubuntu16.04安装Docker、nvidia-docker的教程
- python中验证码连通域分割的方法详解