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. OI回忆录（流水账）

    今天是NOI2017疏散日,晚上回到家在电脑前写下这篇回忆录. 初中参加过几次普及组,拿过一等奖,自招进slyz. 高一参加过CTSC2016,狗牌滚粗qwq 高二参加过WC2017,CTSC2017 ...

  2. 1 Scala基本概念 +IDE

    Scala基本概念 +IDE 推荐:<Scala编程> 1 基本概念 在Spark开发中,Scala被认为是目前和Spark兼容最好的语言. Scala运行在标准的java平台,可以与ja ...

  3. 【POJ】1486：Sorting Slides【二分图关键边判定】

    Sorting Slides Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5390   Accepted: 2095 De ...

  4. Codeforces Round #297 (Div. 2)D. Arthur and Walls 暴力搜索

    Codeforces Round #297 (Div. 2)D. Arthur and Walls Time Limit: 2 Sec  Memory Limit: 512 MBSubmit: xxx ...

  5. wikioi 1017 乘积最大

    dp[i][j]=max(dp[i][j],dp[t][k-1]*mapn[t+1][i]); dp[i][j]代表从0-i之间有j个乘号,mapn[i][j]表示第i位到第j位的数究竟是多少 #in ...

  6. Python学习笔记（六）—元组的操作

    元祖也是一个列表,它和list的区别是元祖里面的元素无法修改: 如果元祖里面只有一个元素的话,那么你必须在这个元素后边加上逗号,这样才是元祖的类型:否则类型会显示其他类型 元组的定义: 元祖中的方法: ...

  7. Oracle连接步骤

    JDBC实现数据所有的操作: 数据库连接需要的步骤 1.数据库的驱动程序:oracle.jdbc.driver.OracleDriver; 2.连接地址:jdbc:oracle:thin:@主机地址: ...

  8. Linux新内核：提升系统性能 --Linux运维的博客

    http://blog.csdn.net/linuxnews/article/details/52864182

  9. LINUX下的21个特殊符号 转

      1．  > 重定向输出符号. 2．  >>重定向输出符号,但有追加的功能. 3．  2>错误重定向输出符号,覆盖原文件内容. 4．  2>>错误重定向输出符号, ...

  10. 普天通信JavaEE开发岗面试题

    1 EJB中有几种Bean,叙述有状态Bean和无状态Bean的差别. 答:EJB中有Session Bean,Entity Bean,以及 Message Driven Bean.这两种的 Sess ...