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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
javascript的理解及经典案例分析
May 20 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
举例讲解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
人族 TERRAN 概述
2020/03/14 星际争霸
文章推荐系统(二)
2006/10/09 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
Python连接phoenix的方法示例
2017/09/29 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python模块future用法原理详解
2020/01/20 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
护理专业毕业生推荐信
2013/10/31 职场文书
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
浅谈pytorch中的dropout的概率p
2021/05/27 Python
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Python中如何处理常见报错
2022/01/18 Python
Python IO文件管理的具体使用
2022/03/20 Python
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python