[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: 被判断是否为数组的值. ------------------------ ...
随机推荐
- [CodeChef-QTREE6]Query on a tree VI
题目大意: 给你一棵黑白树,每个点默认是白色,要求支持以下两种操作: 1.改变一个点的颜色: 2.除去连接不同颜色的点的边,求某个点连通块的大小. 思路: 对原树维护两个树链剖分, 一棵维护当点x为白 ...
- Codeforces Round #361 (Div. 2) E. Mike and Geometry Problem 离散化 排列组合
E. Mike and Geometry Problem 题目连接: http://www.codeforces.com/contest/689/problem/E Description Mike ...
- bestcoder#23 1001 Sequence
Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- The sigrok project
http://www.sigrok.org/wiki/Main_Page The sigrok project aims at creating a portable, cross-platform, ...
- HTML中显示的文字自动换行
在html中控制自动换行 http://www.cnblogs.com/zjxbetter/articles/1323449.html eg: <table> <tr> < ...
- [深入浅出iOS库]之图形库CorePlot
一,前言 Core Plot和s7Graph都是可在iOS平台下使用的开源矢量图形库,s7Graph功能相对比较简单一些,在此就不介绍了.Core Plot 功能强大很多,我们可以利用它很方便地画出复 ...
- 使用 UITabBar 时，子画面虽然已经占满全屏幕，但在其底部，仍然有点击事件（可以响应UITabBar）
使用 UITabBar 时,我们长长会遇到这样的问题. 问题:一个使用(或继承)了UITabBar的Aview,为其添加一个子画面Bview时,虽然 Bview的尺寸已经占满了整个手机屏幕,但是,Bv ...
- ubuntu下C＋＋和C编程
一.anjuta Anjuta DevStudio 的官方地址:http://anjuta.sourceforge.net/Anjuta是一个C/C++ IDE,它最大的特色是灵活,同时打开多个文 ...
- Facebook数据库工具Flashcache初探
Flashcache是Facebook技术团队的又一力作,最初是为加速MySQL设计的.Flashcache是在Linux层面的,所以任何受磁盘IO困绕的软件或应用都可以方便的使用之. 1. Why ...
- dwr3实现消息精确推送详细步骤
最近项目中需要用到推送消息,找了很久终于找到一篇不错的文章,方便以后查看就转载了,也分享给大家,希望能帮到有需要的人. 第一.在项目中引入dwr.jar,然后在web.xml中进行配置,配置如下: & ...