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 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
Jquery之美中不足小结
Feb 16 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
jquery获取tagName再进行判断
May 29 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 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 socket方式提交的post详解
2008/07/19 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
js实现聊天对话框
2020/02/08 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
浅析python递归函数和河内塔问题
2017/04/18 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
matplotlib绘制动画代码示例
2018/01/02 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
请介绍一下Ant
2016/07/22 面试题
设计模式的基本要素是什么
2014/04/21 面试题
综艺节目策划方案
2014/06/13 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang