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 相关文章推荐
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
微信小程序实现折线图的示例代码
Jun 07 Javascript
cypress测试本地web应用
Jun 01 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
咖啡的植物学知识
2021/03/03 咖啡文化
php预定义常量
2006/12/25 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
php生成动态验证码gif图片
2015/10/19 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python语言异常处理测试过程解析
2020/01/08 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Spring Boot 实现 WebSocket
2022/04/30 Java/Android