[AngularJS] Angular 1.3 ngMessages with ngAnimate
Angular with 1.3 angularjs
2023-09-14 09:00:56 时间
Note: Can use $dirty to check whether user has intracted with the form:
https://docs.angularjs.org/api/ng/type/form.FormController
Read More:
http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html
https://egghead.io/lessons/angularjs-using-ng-messages-with-ng-animate
<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-messages.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.js"></script> <title>What's new in Angular 1.3</title> </head> <body ng-app="app" ng-controller="MainCtrl as vm"> <h1>Angular {{vm.angularVersion}}</h1> <h2> Using ngMessages with ngAnimate <small>by <a href="http://twitter.com/kentcdodds">@kentcdodds</a></small> </h2> <hr /> <h2>Demo</h2> <form name="myForm"> <input type="email" name="myField" ng-model="field" required minlength="5" /> <div class="my-messages" ng-show="myForm.myField.$touched" ng-messages="myForm.myField.$error"> <div class="some-message" ng-message="required">This field is required</div> <div class="some-message" ng-message="minlength">Input too short</div> <div class="some-message" ng-message="email">This field must be an email</div> </div> </form> </body> </html>
.my-messages { position: relative; } .my-messages.ng-active { /* messages are showing */ } .my-messages.ng-inactive { /* messages are not showing */ } .some-message { position: absolute; opacity: 1; transition: .3s linear all; font-size: .8em; } .some-message.ng-enter.ng-enter-active { opacity: 1; top: 0; } .some-message.ng-enter { opacity: 0; top: -20px; } .some-message.ng-leave { opacity: 1; top: 0; } .some-message.ng-leave-active { opacity: 0; top: 20px; }
var app = angular.module('app', ['ngMessages', 'ngAnimate']); app.controller('MainCtrl', function MainCtrl() { 'use strict'; var vm = this; vm.angularVersion = angular.version.full; });
相关文章
- node、npm 、package.json、Angular Cli、webpack之间的关系(Windows环境下)
- Angular 结合 dygraphs 实现 annotation
- Angular HTTPClient 发送请求的触发方式讨论
- Angular面试题_session面试题
- 使用 Angular Universal 进行服务器端渲染的防御性编程思路
- 关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论
- Angular 项目多国语言设置
- 关于 Angular 应用的 Bootstrap 过程
- 备受 Vue、Angular 和 React 青睐的 Signals 演进史
- MySQL Error number: 3739; Symbol: ER_SRS_INVALID_ANGULAR_UNIT; SQLSTATE: SR002 报错 故障修复 远程处理
- 从Oracle中挖掘洞见坚实的With表(oracle with表)
- Angular用来控制元素的展示与否的原生指令介绍