Angular的事件和表单详解

2024-09-28 00:14:52

前面的文章说道了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在做验证时，这些属性会及时的添加到元素上，方便定制这些类来实现特定的场景应用。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

AngularJS 入门教程之事件处理器详解

在这一步,你会在手机详细信息页面让手机图片可以点击. 请重置工作目录: git checkout -f step-10 手机详细信息视图展示了一幅当前手机的大号图片,以及几个小一点的缩略图.如果用户点击缩略图就能把那张大的替换成自己那就更好了.现在我们来看看如何用AngularJS来实现它. 步骤9和步骤10之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器 app/js/controllers.js ... function PhoneDetailCtrl($scope
详细分析使用AngularJS编程中提交表单的方式

在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理
AngularJS深入探讨scope，继承结构，事件系统和生命周期

本文实例讲述了AngularJS的scope,继承结构,事件系统和生命周期.分享给大家供大家参考,具体如下: 深入探讨 Scope 作用域每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构让我们再来看看这个简单的 HelloCtrl 的例子: var HelloCtrl = function($scope){ $scope.name = 'World'; } HelloCtrl
AngularJS中directive指令使用之事件绑定与指令交互用法示例

本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法.分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="Shield
AngularJS使用ngMessages进行表单验证

AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="
AngularJS实现表单验证

虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始复制代码代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p&
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat
AngularJS实现给动态生成的元素绑定事件的方法

本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法.分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法). 2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('
AngularJS 中的事件详解

AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.
浅谈angularJS中的事件

什么是事件 •如同浏览器响应浏览器层的事件,比如鼠标点击.获得焦点,angular应用也可以响应angular事件 •angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件事件传播因为作用域是有层次的,所以我们可以在作用域链上传递事件: •使用$emit冒泡事件,事件从当前子作用域冒泡到赋作用域,在产生事件的作用域之上的所有作用域都会收到这个事件的通知 $emit()方法带有两个参数: name 要发出的事件的名称 args 一个参数

Angular的事件和表单详解

相关推荐

随机推荐