[AngularJS] Angular 1.3 ngMessages with ngAnimate
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:;
transition: .3s linear all;
font-size: .8em;
}
.some-message.ng-enter.ng-enter-active {
opacity:;
top:;
}
.some-message.ng-enter {
opacity:;
top: -20px;
}
.some-message.ng-leave {
opacity:;
top:;
}
.some-message.ng-leave-active {
opacity:;
top: 20px;
}
var app = angular.module('app', ['ngMessages', 'ngAnimate']);
app.controller('MainCtrl', function MainCtrl() {
'use strict';
var vm = this;
vm.angularVersion = angular.version.full;
});
[AngularJS] Angular 1.3 ngMessages with ngAnimate的更多相关文章
- AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12
1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...
- AngularJs angular.Module模块接口配置
angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
- [AngularJS] Angular 1.3 $submitted for Form in Angular
AngularJS 1.3 add $submitted for form, so you can use $submitted to track whether the submit event ...
- [AngularJS] Angular 1.3 Anuglar hint
Read More: http://www.linkplugapp.com/a/953215 https://docs.google.com/document/d/1XXMvReO8-Awi1EZXA ...
- [AngularJS] Angular 1.3 ng-model-options - getterSetter
getterSetter: boolean value which determines whether or not to treat functions bound to ngModel as ...
- [AngularJS] Angular 1.3: ng-model-options updateOn, debounce
<!DOCTYPE html> <html ng-app="app"> <head lang="en" > <meta ...
- AngularJs angular.identity和angular.noop详解
angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. ----------以上是官网对该接口的说明,只能说这个文档写得也太二,让人完全看不懂.要理解它的用途,可直接看 ...
- AngularJs Angular数据类型判断
angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...
随机推荐
- 最短网络Agri-Net
[问题描述] 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助.约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享给其他农场. ...
- luoguP4503 [CTSC2014]企鹅QQ hash
既然只有一位的不同,那么我们可以枚举这一位.... 我们只需要快速地计算去掉某一位的$hash$值.... 由于$hash(S) = \sum s[i] * seed^i$,因此去掉第$i$位的权值只 ...
- Apache 如何反向代理tomcat并且实现Session保持
简介 LAMT=Linux+Apache+MySQL+Tomcat: Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器: 在中小型系统和并发访问用户不是很多的场合下 ...
- Git_解决冲突
人生不如意之事十之八九,合并分支往往也不是一帆风顺的. 准备新的feature1分支,继续我们的新分支开发: $ git checkout -b feature1 Switched to a new ...
- HDU 3487 Play with Chain （splay tree)
Play with Chain Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- Kernel Newbies内核开发新手的资源
Jessica McKellar在Ksplice blog上的博客文章 <Linux Device Drivers> 如果你在写一个操作系统,OSDev wiki是一个不错的网站 Kern ...
- error MSB8031: Building an MFC project for a non-Unicode character set is deprecated
vs2013编译VC++源码,错误: error MSB8031: Building an MFC project for a non-Unicode character set is depreca ...
- Selenium2+python自动化55-unittest之装饰器（@classmethod）
前言 前面讲到unittest里面setUp可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用例时候都会重新打开,这样就会浪费很多时间. 于是就想是不是可以 ...
- UITableView分页
UITableView分页上拉加载简单,ARC环境,源码如下,以作备份: 原理是,点击最后一个cell,触发一个事件来处理数据,然后reloadData RootViewController.m + ...
- 通过@Value注解读取.properties配置内容
@Controller @RequestMapping("/value") public class ValuePropertyController extends Applica ...