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的更多相关文章

  1. AngularJS学习--- 动画操作 (Applying Animations) ngAnimate　step 12

    1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...

  2. AngularJs angular.Module模块接口配置

    angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...

  3. [Angularjs]angular ng-repeat与js特效加载先后导致的问题

    写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...

  4. [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 ...

  5. [AngularJS] Angular 1.3 Anuglar hint

    Read More: http://www.linkplugapp.com/a/953215 https://docs.google.com/document/d/1XXMvReO8-Awi1EZXA ...

  6. [AngularJS] Angular 1.3 ng-model-options - getterSetter

    getterSetter:  boolean value which determines whether or not to treat functions bound to ngModel as ...

  7. [AngularJS] Angular 1.3: ng-model-options updateOn, debounce

    <!DOCTYPE html> <html ng-app="app"> <head lang="en" > <meta ...

  8. AngularJs angular.identity和angular.noop详解

    angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. ----------以上是官网对该接口的说明,只能说这个文档写得也太二,让人完全看不懂.要理解它的用途,可直接看 ...

  9. AngularJs Angular数据类型判断

    angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...

随机推荐

  1. windows svn 客户端连不上linux svn server

    采坑记录:linux服务器上svn://127.0.0.1可以正常使用,windows客户端远程连接不上,说明是端口号的问题. linux正常配置了iptables开启了3690端口,连接不上. 干脆 ...

  2. BZOJ1597 USACO2008土地购买

    斜率优化DP. #include<bits/stdc++.h> using namespace std; ; long long f[N],n,cnt,q[N]; ; bool v[N]; ...

  3. 用Win32编写发送消息至Notepad++的程序

    这次利用Win32编程写一个发送"Win32 Assembly,My First SendMessage Program !" 每个程序要发送消息至另一个程序的时候,通常使用Sen ...

  4. [分享]2013：Linux的黄金之年-十大杰出成就

    2013年已经过去.这一年见证了许多里程碑事件,使得2013年可以称得上是一个Linux的黄金之年.其中一些成果在FOSS和Linux世界更可以称得上是举世瞩目的成就. 1.Android的上升趋势 ...

  5. 华为S5300系列升级固件S5300SI-V100R006C00SPC800.cc

    这个固件附带了web,V100R005可以直接升级到这个版本,但没什么必要,因为V100R005本身可以直接升级到V200. 升级小插曲: 1.升级的使用使用Windows,不要用Mac或者Linux ...

  6. BZOJ 1269: [AHOI2006]文本编辑器editor （splay tree）

    1269: [AHOI2006]文本编辑器editor Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1213  Solved: 454[Submit ...

  7. Android intent action大全

    android.intent.action.ALL_APPSandroid.intent.action.ANSWERandroid.intent.action.ATTACH_DATAandroid.i ...

  8. thread_indent

    http://blog.csdn.net/justlinux2010/article/details/10269033

  9. ubuntu12.04-server版 倒腾

    前面的话: 第一份工作,在阿里巴巴干了一年零四个月不到几天,来到百度上海.从运维岗转到开发岗.从前端业务线转到后段数据线,基本上算从头开始,给自己鼓个劲. 进到正题,公司发了笔记本,自己原来那个破笔记 ...

  10. Android之获取sdcard卡的信息

    public static SDCardInfo getSDCardInfo() { String sDcString = android.os.Environment.getExternalStor ...