杰晶网络

Angular的事件和表单详解
网络编程 2024/5/10 佚名
3 2

前面的文章说道了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="/UploadFiles/2021-04-02/angular.min.js">
 

首先看看表单部分，使用了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的事件和表单详解


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
Angular,事件,表单
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“Angular的事件和表单详解”
暂无“Angular的事件和表单详解”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接