Angular的事件和表单详解


Posted in Javascript onDecember 26, 2016

前面的文章说道了click事件,与其类似的mouseover以及mousemove等等。下面看看selected、change、copy等运用在表单的事件吧。 

selected

<div ng-controller="Aaa">
 
 <input type="checkbox" ng-model="aaa" value="{{aaa}}">
 <select>
  <option>11111</option>
  <option ng-selected="aaa">22222</option>
  <option>33333</option>
 </select>

</div>

<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){}]);
</script>

如果我们希望一个select选中指定的option,只需要设置该option为selected="selected",现在为第二个绑定一个变量aaa,对应了一个单选框的ng-model,但单选框选中时aaa为true,取消选中时为false,这样就能设置option的selected了。

change

<div ng-controller="Aaa">
 <input type="text" ng-change="bbb='hello'" ng-model="bbb">
 <p>{{bbb}}</p>
</div>

<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){}]);
</script>

当输入框的内容发现改变的时候,让bbb变量设为'hello'。 

copy

<div ng-controller="Aaa">
 <input type="text" value="xiecg" ng-copy="ccc='hello'">
 <p>{{ccc}}</p>
</div>

<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){}]);
</script>

当我们粘贴内容到输入框的时候,ccc的值变成'hello'。

除此之外,还有cut(剪切)、paste(粘贴事件)。 

下面看个具体的表单验证的例子: 

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>input相关指令详解</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<style type="text/css">
  .username .ng-valid{background-color:lightgreen;}
  .username .ng-invalid{background-color:lightcoral;}
  .username .ng-pristine{background-color:#fafafa;}
  /*
  .username .ng-dirty{}
  .username .ng-invalid-required{}
  .username .ng-invalid-minlength{}
  .username .ng-valid-max-length{}
  */

</style>
</head>
<body>

<div ng-controller="Aaa">
 <div class="col-md-6">
  <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid,user)" class="form-horizontal" novalidate>
   <div class="form-group has-feedback">
    <div class="col-md-4">
     <label for="name">用户名</label>
    </div>
    <div class="col-md-8 username">
     <input class="form-control" id="name" name="name" type="text" required ng-pattern="/^[a-zA-Z]{0,6}$/" ng-model='user.name' />
     <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$valid"></span>
     <span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$invalid"></span>
    </div>
   </div>

   <div class="form-group has-feedback">
    <div class="col-md-4">
     <label for="url">URL</label>
    </div>
    <div class="col-md-8">
     <input type="url" id="url" name="url" ng-model="user.url" class="form-control" />
     <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.url.$dirty && myForm.url.$valid"></span>
    </div>
   </div>
   <div class="form-group text-center">
    <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
   </div>
  </form>  
 </div>
 <div class="col-md-12">
  <p>
   用户名:{{user.name}}
   没修改:{{myForm.name.$pristine }}
   修改过:{{myForm.name.$dirty}}
   验证失败:{{myForm.name.$invalid}}
   验证成功:{{myForm.name.$valid}}
   required:{{myForm.name.$error.required}}
  </p>
  <p>
   URL:{{user.url}}
   没修改:{{myForm.url.$pristine }}
   修改过:{{myForm.url.$dirty}}
   验证失败:{{myForm.url.$invalid}}
   验证成功:{{myForm.url.$valid}}
   错误详情:{{myForm.url.$error}}
  </p>
 </div>
</div>

<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope','$interval',function($scope,$interval){
  $scope.submitForm = function(isValid,data) {
   //验证表单是否可是提交
   if (isValid) {
    console.log(data);
   }else{
    console.log('验证失败');
   }
  };
 }]);
</script>
</body>
</html>
 

首先看看表单部分,使用了novalidate属性禁用了表单默认验证行为,并绑定了ng-submit绑定了submitForm方法。

在用户名的input上设置了required,表示不能为空。ng-pattern是自定义的正则表达式。ng-model是数据(用户填写的数据)。

URL的input也是类似的设置。 

看一下在form绑定的submitForm函数,传递了两个参数,myForm.$valid以及user。

myForm是form的name,代表整个表单,myForm.$valid是个布尔值,表示整个表单的元素是否通过验证,user是用户填写的数据,用于提交数据。我们都可以通过controller得到这些信息,然後提交给後端。

myForm代表整个表单,给input附上name值,就可以得到input的验证信息,我们以用户名的input为例。

用户名:{{user.name}}
没修改:{{myForm.name.$pristine }}
修改过:{{myForm.name.$dirty}}
验证失败:{{myForm.name.$invalid}}
验证成功:{{myForm.name.$valid}}
required:{{myForm.name.$error.required}}

这里除了第一个之外,其他都是布尔值。

在用户名的input的同级上有两个span元素,分别是正确和错误的图标。(ng-show用于控制元素的显示和隐藏,後面会详细介绍)

myForm.name.$dirty && myForm.name.$valid 当用户修改input的值了,并且验证成功了,我们给予正确的提示。

myForm.name.$dirty && myForm.name.$invalid 当用户修改input的值了,但是遗憾验证失败了,我们给予失败的提示。

除此之外,angular提供了class为我们做更多样式上的提示。

Angular的事件和表单详解

angular在做验证时,这些属性会及时的添加到元素上,方便定制这些类来实现特定的场景应用。

当我们全部输入正确就可以做ajax提交了。

Angular的事件和表单详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
jQuery中extend函数详解
Feb 13 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
Angular的MVC和作用域
Dec 26 #Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 #Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 #Javascript
Angular的$http与$location
Dec 26 #Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 #Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 #Javascript
Angular路由简单学习
Dec 26 #Javascript
You might like
一个用php实现的获取URL信息的类
2007/01/02 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
Python输出各行命令详解
2018/02/01 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
linux面试题参考答案(6)
2016/06/23 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
终止劳动合同协议书
2014/04/14 职场文书
2014年医院工作总结
2014/11/20 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
python 如何用terminal输入参数
2021/05/25 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技