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中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
js中跨域方法原理详解
Jul 19 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
小程序实现搜索框
Jun 19 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
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页面缓存ob系列函数介绍
2012/10/18 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Django 返回json数据的实现示例
2020/03/05 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
销售人员求职的自我评价分享
2014/03/15 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
企业员工集体活动方案
2014/08/17 职场文书
社区党员公开承诺书
2014/08/30 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
孔庙导游词
2015/02/04 职场文书
个人廉政承诺书
2015/04/28 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
PHP 时间处理类Carbon
2022/05/20 PHP
JS实现简单的九宫格抽奖
2022/06/28 Javascript