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. luoguP4336 [SHOI2016]黑暗前的幻想乡 容斥原理 + 矩阵树定理

    自然地想到容斥原理 然后套个矩阵树就行了 求行列式的时候只有换行要改变符号啊QAQ 复杂度为\(O(2^n * n^3)\) #include <cstdio> #include < ...

  2. Contest Reviews(Updating)

    现在每天至少一套题又不太想写题解…… 那就开个坑总结下每场的失误和特定题目的技巧吧 2018.8.25[ZROI] T3传送门 T1:找规律找崩了…… 最好不要一上来就钻进大讨论,先想有没有普适规律 ...

  3. [COGS2580]偏序 II

    [COGS2580]偏序 II 题目大意: \(n(n\le50000)\)个五元组,求五维偏序. 思路: CDQ分治套CDQ分治套CDQ分治套树状数组. 时间复杂度\(\mathcal O(n\lo ...

  4. 如何在ubuntu安装phpstorm

    第一步:使用组合键ctrl+alt+t 打开Terminal,cd /home/xxx(当前登录用户名)/downloads(下载目录) 第二步:下载 phpstorm 附截止发文最新版本链接:htt ...

  5. CentOS7LINUX 内核调试符号安装

    yum install -y kernel-devel # debuginfo,在CentOS7中需要这样装 sudo vim /etc/yum.repos.d/CentOS-Debuginfo.re ...

  6. sunstudio 12.3 on solaris 10

    #include <stdio.h> #include <stdlib.h> #define RPT 10000000 int main() { int i=1; for( i ...

  7. NativeXml

    NativeXml GITHUB: https://github.com/kattunga/NativeXml THIS IS A FORK WITH SOME FIXES AND IMPROVEME ...

  8. jsp下Kindeditor环境搭建

    1.环境:tomcat 2.需要外部jar包: commons-fileupload-1.2.1.jar commons-io-1.4.jar json_simple-1.1.jar 3.下载Kind ...

  9. dwz ajax session超时跳转登录页（struts2自定义拦截器）

    1.定义struts2拦截器(网上例子很多) 代码如下: package rt.intercepter; import java.util.Map; import javax.servlet.http ...

  10. Java Net版短网址(ShortUrl)的算法及实现 待续

    算法 1)将长网址md5生成32位签名串,分为4段, 每段8个字节; 2)对这四段循环处理, 取8个字节, 将他看成16进制串与0x3fffffff(30位1)与操作, 即超过30位的忽略处理; 3) ...