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脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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 新手入门
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
jquery动态加载js三种方法实例
2013/08/03 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
Vuex 入门教程
2018/01/10 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Python中常见的异常总结
2018/02/20 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python 内置函数汇总详解
2019/09/16 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
深入理解Python 多线程
2020/06/16 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
医学检验专业个人求职信范文
2013/12/04 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
年度评优评先方案
2014/06/03 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
护理专业自我评价
2015/03/11 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL