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学习笔记(十) js对象 继承
Jun 19 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
jQuery的position()方法详解
Jul 19 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
JavaScript switch语句使用方法简介
Dec 30 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP加密解密函数详解
2015/10/28 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
使用python实现rsa算法代码
2016/02/17 Python
Python装饰器原理与用法分析
2018/04/30 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
质量月口号
2014/06/20 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
护理专业自我评价
2015/03/11 职场文书
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python