脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular事件和表单

Angular的事件和表单详解

 更新时间：2016年12月26日 15:53:58   作者：小谢53  
这篇文章主要为大家详细介绍了Angular的事件和表单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前面的文章说道了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提交了。

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

您可能感兴趣的文章:

相关文章

  • Angular中使用$watch监听object属性值的变化(详解)

    Angular中使用$watch监听object属性值的变化(详解)

    下面小编就为大家带来一篇Angular中使用$watch监听object属性值的变化(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 基于AngularJS前端云组件最佳实践

    基于AngularJS前端云组件最佳实践

    这篇文章主要为大家详细介绍了基于AngularJS前端云组件最佳实践,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 详解Angular组件生命周期(一)

    详解Angular组件生命周期(一)

    每个Angular版本在其生命周期中都经历了各个阶段。组件在Angular中起着关键作用; 在这里，本文将讨论Angular中的组件生命周期以及它们如何影响框架所有版本的生命周期。
    2021-05-05
  • 关于AngularJS中ng-repeat不更新视图的解决方法

    关于AngularJS中ng-repeat不更新视图的解决方法

    今天小编就为大家分享一篇关于AngularJS中ng-repeat不更新视图的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 简单谈谈关于Angular Cli打包的事

    简单谈谈关于Angular Cli打包的事

    使用过angular2人都应该知道，angular2提供的Angular CLI来快速搭建，快速生成serives、component、derective、modulet各种模板...下面这篇文章主要给大家介绍了关于Angular Cli打包的一些事，需要的朋友可以参考下。
    2017-09-09
  • AngularJS实现全选反选功能

    AngularJS实现全选反选功能

    这篇文章主要介绍了AngularJS实现全选反选功能，这里用到AngularJS四大特性之二----双向数据绑定，对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • Angular6 Filter实现页面搜索的示例代码

    Angular6 Filter实现页面搜索的示例代码

    这篇文章主要介绍了Angular6 Filter实现页面搜索的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • NodeJs——入门必看攻略

    NodeJs——入门必看攻略

    下面小编就为大家带来一篇NodeJs——入门必看攻略。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • angularJs使用ng-repeat遍历后选中某一个的方法

    angularJs使用ng-repeat遍历后选中某一个的方法

    今天小编就为大家分享一篇angularJs使用ng-repeat遍历后选中某一个的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Angular的自定义指令以及实例

    Angular的自定义指令以及实例

    本文主要介绍了Angular的自定义指令，并提供了实例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2016-12-12

最新评论