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. UVA1378 A funny stone game

    博弈论. 就是有一堆石子你拿走一堆中的一个,然后再向后面两堆中加两个问胜负 i<j<=k 所以我们可以直接通过sg函数计算,考虑问题的奇偶性,如果这一位是奇的我们才考虑,偶的可以模仿 然后 ...

  2. 【堆优化Dijkstra】BZOJ4152- [AMPPZ2014]The Captain

    [题目大意] 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小费用. [思路] 按照某维坐标排序,相邻两个点在这一维度 ...

  3. 【漏洞预警】Apache ActiveMQ Fileserver远程代码执行漏洞(CVE-2016-3088)

    漏洞编码:CVE-2016-3088 实验环境:Linux Apache ActiveMQ版本号:Apache ActiveMQ 5.7.0 ----------------------------- ...

  4. 轻巧的编辑器：Sublime Text3 user设置

    开发到现在,编辑器倒用过不少,VIM.zend.my eclipse.EPP.editplus.notepad++.sublime text 2. 最初使用sublime是同学推荐的,说其何其的好,何 ...

  5. php模块组成

    php总共有三个模块:内核.ZEND引擎.扩展. 内核是用来处理请求.文件流.错误处理等操作的: ZEND引擎是将源文件转换成机器语言,然后在虚拟机上运行: 扩展层是一组函数.类库和流,php使用它们 ...

  6. bash编程之 ~制作Mini Linux系统~

    说明1:在一个Linux宿主机系统上,通过以上步骤,可以制作一个微小的Linux系统(可以放置在U盘中等),然后在其它的主机(虚拟机或者物理机)上运行,以实现最小化定制系统的目的. 说明2:上图中黑色 ...

  7. Android中播放本地SD卡中歌曲须要的加入的权限

    使用MediaPlayer播放本地Mp3文件时.须要注意的訪问路径的问题以及訪问权限的问题. 1.訪问路径:/storage/emulated/0 此路径即为手机的根路径,能够通过下载ES文件浏览器软 ...

  8. 知识共享 - creative commons

    Creative Commons,简称CC,中国大陆正式名称为知识共享,台湾正式名称为创用CC. 是一个非营利组织,也是一种创作的授权方式. 此组织的主要宗旨是增加创意作品的流通可及性,作为其他人据以 ...

  9. 开启PowerDesigner15工具栏上的被禁用掉的图标

    PowerDesigner 15 的版本,工具栏上的Inheritance图标默认是禁用的,如下图所示:

  10. ios 中局部变量可以通过传递来进行管理和释放，借此可提高代码的內聚度

    ios 中 局部变量可以通过传递来进行管理和释放,通过多使用局部变量,可以提高代码的內聚度.如下: -(void)someMethod { UILabel *label = [[UILabel al ...