AngularJS的表单使用详解


Posted in Javascript onJune 17, 2015

 AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。
事件

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。

  •     ng-click
  •     ng-dbl-click
  •     ng-mousedown
  •     ng-mouseup
  •     ng-mouseenter
  •     ng-mouseleave
  •     ng-mousemove
  •     ng-mouseover
  •     ng-keydown
  •     ng-keyup
  •     ng-keypress
  •     ng-change

ng-click

使用点击一个按钮的指令,表单重置数据。

<input name="firstname" type="text" ng-model="firstName" required>
<input name="lastname" type="text" ng-model="lastName" required>
<input name="email" type="email" ng-model="email" required>
<button ng-click="reset()">Reset</button>
<script>
  function studentController($scope) { 
   $scope.reset = function(){
     $scope.firstName = "Mahesh";
     $scope.lastName = "Parashar";
     $scope.email = "MaheshParashar@yiibai.com";
 }  
  $scope.reset();
}
</script>

验证数据

可使用下面跟踪误差。

  •     $dirty - 规定值已被改变。
  •     $invalid- 该值的状态是无效的。
  •     $error- 指出确切的错误。

例子

下面的例子将展示上述所有指令。
testAngularJS.html

<html>
<head>
<title>Angular JS Forms</title>
<style>
table, th , td {
 border: 1px solid grey;
 border-collapse: collapse;
 padding: 5px;
}
table tr:nth-child(odd) {
 background-color: #f2f2f2;
}
table tr:nth-child(even) {
 background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</td><td><input name="firstname" type="text" ng-model="firstName" required>
  <span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
   <span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
  </span>
</td></tr>
<tr><td>Enter last name: </td><td><input name="lastname" type="text" ng-model="lastName" required>
  <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
   <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
  </span>
</td></tr>
<tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
   <span ng-show="studentForm.email.$error.required">Email is required.</span>
  <span ng-show="studentForm.email.$error.email">Invalid email address.</span>
  </span>
</td></tr>
<tr><td><button ng-click="reset()">Reset</button></td><td><button 
 ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||
   studentForm.lastname.$dirty && studentForm.lastname.$invalid ||
   studentForm.email.$dirty && studentForm.email.$invalid"
 ng-click="submit()">Submit</button></td></tr>
</table>
</form>
</div>
<script>
function studentController($scope) { 
  $scope.reset = function(){
 $scope.firstName = "Mahesh";
 $scope.lastName = "Parashar";
 $scope.email = "MaheshParashar@yiibai.com";
  }  
  $scope.reset();
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html。看到结果如下。

AngularJS的表单使用详解

Javascript 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jquery ui对话框实例代码
May 10 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
JS常用算法实现代码
Nov 14 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
举例讲解AngularJS中的模块
Jun 17 #Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 #Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 #Javascript
JavaScript AOP编程实例
Jun 16 #Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 #Javascript
动态加载jQuery的方法
Jun 16 #Javascript
详解AngularJS中的表格使用
Jun 16 #Javascript
You might like
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
表单内同名元素的控制
2006/11/22 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python实现抖音视频批量下载
2018/06/20 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python flask搭建web应用教程
2019/11/19 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
详解python tcp编程
2020/08/24 Python
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
中专毕业生个人职业生涯规划
2014/02/19 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2014财务年终工作总结
2014/12/08 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python