媲美jQuery的JS框架：AngularJS（2）(4)_H5之家 - 中国HTML5教程资源分享第一站

再次举个栗子：

<body ng-app="app" ng-controller="ctrl"> <button ng-click="func()">点我弹窗</button> <button ng-mouseover="func()">点我弹窗</button> <button ng-mouseout="func()">点我弹窗</button> <input type="text" ng-keydown="keydown()" /> </body> <script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript"> angular.module("app",[]) .controller("ctrl",function($scope){ $scope.func = function(){ alert("哈哈哈"); } $scope.keydown = function(){ console.log(event.keyCode ==13); } }) </script>

结果：

四、AngularJS中的表单验证及动画

4.1 表单验证

1、表单中，常用的验证操作

$dirty 表单有填写记录

$valid 字段内容合法的

$invalid 字段内容是非法的

$pristine 表单没有填写记录

$error 表单验证不通过的错误信息

2、验证时，必须给form和input，设置name属性。

给form和input设置name之后，回自动将表单信息绑定到￥scope作用域中。所以，可以直接使用formName.inputName验证

操作，得到验证结果。

例如：

formName.inputName.$dirty = "true";表示表单被填写过！

formName.inputName.$invalid = "true";表示表单输入内容不合法！

formName.inputName.$error.required = "true";表示设置了必填，但没有输入；

注意：

$error支持的验证：

required/minlength/maxlength/partten(正则验证..)/eamil/number/date/url等。。。

3、为了避免AngularJS的验证与HTML5的表单验证冲突；

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>AngularJS中的表单验证</title> 6 <link rel="stylesheet"href="css/bootstrap.css" /> 7 <style type="text/css"> 8 .row{ 9 margin: 10px 0px; 10 } 11 </style> 12 </head> 13 <body ng-app="app" ng-controller="ctrl"> 14 15 16 <div class="container" style="width: 400px;margin: 50px auto; padding: 0px;"> 17 <div class="panel panel-primary"> 18 <div class="panel-heading"> 19 <div class="panel-title" style="text-align: center;"> 20 用户注册 21 </div> 22 </div> 23 <div class="panel-body"> 24 <form class="form-horizontal" name="form" novalidate> 25 <div class="row"> 26 <div class="col-xs-4">用户名：</div> 27 <div class="col-xs-8"> 28 <input type="text" class="form-control" name="name" ng-model="quot;user.name " required ng-minlength="6" ng-maxlength="12" /> 29 <p style="margin: 0px;color: red;" ng-show="form.name .$invalid && form.name .$dirty"> 30 <span ng-show="form.name .$error.required">用户名必须填写</span> 31 <span ng-show="form.name .$error.minlength">用户名长度最小为6位</span> 32 <span ng-show="form.name .$error.maxlength">用户名长度最大为12位</span> 33 </p> 34 </div> 35 </div> 36 <div class="row"> 37 <div class="col-xs-4">邮箱：</div> 38 <div class="col-xs-8"> 39 <input type="email" class="form-control" name="email" ng-model="user.email" required/> 40 <p style="margin: 0px;color: red;" ng-show="form.email.$invalid && form.email.$dirty"> 41 <span ng-show="form.email.$error.required">邮箱必须填写</span> 42 <span ng-show="form.email.$error.email">邮箱不合法</span> 43 </p> 44 </div> 45 </div> 46 <div class="row"> 47 <div class="col-xs-4">密码：</div> 48 <div class="col-xs-8"> 49 <input type="passward" class="form-control" name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$"/> 50 <p style="margin: 0px;color: red;" ng-show="form.pwd.$invalid && form.pwd.$dirty"> 51 <span ng-show="form.pwd.$error.pattern">密码只能由6-18位字母数字下划线组成</span> 52 </p> 53 </div> 54 </div> 55 56 <div class="row"> 57 <div class="col-xs-4">确认密码：</div> 58 <div class="col-xs-8"> 59 <input type="passward" class="form-control" name="repwd" ng-model="user.repwd" required /> 60 <p style="margin: 0px;color: red;" ng-show="form.repwd.$dirty && user.pwd!=user.repwd">两次密码输入不一致</p> 61 </div> 62 </div> 63 <div class="row"> 64 <div class="col-xs-6"> 65 <input type="submit" value="注册" class="btn btn-success" ng-disabled="form.$invalid||user.pwd!=user.repwd" required /> 66 67 </div> 68 <div class="col-xs-6"> 69 <input type="submit" value="重置" class="btn btn-warning" /> 70 </div> 71 </div> 72 73 74 </form> 75 </div> 76 </div> 77 </div> 78 79 80 81 </body> 82 83 <script type="text/javascript" src="js/angular.js"></script> 84 <script type="text/javascript"> 85 angular.module("app",[]) 86 .controller("ctrl",function(){ 87 88 }) 89 </script> 90 </html>

结果：

4.2 AngularJS中的动画

AngularJS中的动画没有css、js及jQuery那么复杂；

在AngularJS中使用动画：

1、导入angular-animate.js

2、如果页面中没有自定义app模块，则可以直接绑定系统模块ng-app="ngAnimate"

如果页面中有自定义的app模块，则可以在自定义模块的数组中，注入ngAnimate。

eg：angular.module("app",["ngAnimate"])

3、当使用ng-show、ng-hide显示或隐藏元素的时候，系统会自动添加或移除.ng-hide这个class类

4、当使用ng-if、ng-switch、ng-repeat等其他指令时，需要分别设置显示后和隐藏后的两种CS样式；

.ng-enter-active,.ng-leave{} 显示后

.ng-enter,.ng-leave-active{} 隐藏后