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 相关文章推荐
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
微信小程序之左右布局的实现代码
Dec 13 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实现与ASP Banner组件相似的类
2006/10/09 PHP
php实现图片添加水印功能
2014/02/13 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
js 文件引入实现代码
2010/04/23 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
python 重定向获取真实url的方法
2018/05/11 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python实现静态web服务器
2019/09/03 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python用700行代码实现http客户端
2021/01/14 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
什么是makefile? 如何编写makefile?
2013/01/02 面试题
演讲稿怎么写才完美
2014/01/02 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android