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. 百度乐播音乐真实地址查找api接口

    1.百度乐播官网:http://lebo.baidu.com: 随便点击进去一个音乐界面,如:http://lebo.baidu.com/album/9036366 2.chrome浏览器右击'检查' ...

  2. [UOJ422]小Z的礼物

    设要取的物品集合为$S$,$E=n(m-1)+(n-1)m$,$x_T$为覆盖了$T$中至少一个元素的$1\times2$数量 $$\begin{aligned}\sum\limits_{i=1}^\ ...

  3. kali下利用weeman进行网页钓鱼

    工具下载链接:https://files.cnblogs.com/files/wh4am1/weeman-master.zip 利用wget命令下载zip压缩包 利用unzip命令解压 接着直接cd进 ...

  4. [USACO5.5]Hidden Password

    题目大意: 求字符串最小表示. 思路: 本来按照lbn187的课件,知道SAM可以求字符串最小表示. 然而他并没有提供例题,就自己找了一道做. 大体思想就是把字符串复制一遍接在后面,构建SAM,然后每 ...

  5. centos7安装redis-4.0.1集群

    试验机操作系统:CentOS Linux release 7.2.1511 (Core) 本文的目的是教会大家快速搭建redis集群,完了再深入学习. 试问如果不上手试验,看的资料再多有个毛用? 下载 ...

  6. 选择问题（selection problem）

    /*     本文是选择问题: 选择一组N个数当中的第k小的数(第k大的数类似)     集中方法的实现代码 */       #include "sorting.h" #incl ...

  7. SQLite 一款轻型的数据库

    SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在很多嵌入式产 ...

  8. QN-H618 遥控器复制再生仪(拷贝机)

    针对现在市场上日益更新的遥控器种类,本公司经过长时间的研究,推出新一代拷贝机,本产品有以下特点: 1. 众多车库门遥控分析信息被集成在一台机器内,只要一种遥控器,就可以复制众多品牌的车库遥控.免去积压 ...

  9. Linux与Windows比较出的20个优势

    Linux相信大家并不会陌生,Android(安卓或安致)就是基于Linux平台的开源手机操作系统,在电脑方面有ubuntu(中文名:乌班图)等等也是基于linux. Windows与Linux Li ...

  10. 咏南WEB框架群集

    咏南WEB框架群集 咏南WEB框架支持群集部署,支持负载均衡和自动故障转移. 咏南WEB群集部署在阿里云服务器上面. 在线测试:http://47.106.93.126:9999/