[AngularJS] Angular 1.3 ngMessages with ngAnimate

Note: Can use $dirty to check whether user has intracted with the form:

<!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: 1;
  transition: .3s linear all;
  font-size: .8em;
}

.some-message.ng-enter.ng-enter-active {
  opacity: 1;
  top: 0;
}

.some-message.ng-enter {
  opacity: 0;
  top: -20px;
}

.some-message.ng-leave {
  opacity: 1;
  top: 0;
}

.some-message.ng-leave-active {
  opacity: 0;
  top: 20px;
}

var app = angular.module('app', ['ngMessages', 'ngAnimate']);

app.controller('MainCtrl', function MainCtrl() {
  'use strict';
  var vm = this;
  vm.angularVersion = angular.version.full;
  
});

posted @ 2014-11-02 00:18 Zhentiw 阅读(609) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

公告

昵称： Zhentiw
园龄： 13年2个月
粉丝： 41
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Answer1215

[AngularJS] Angular 1.3 ngMessages with ngAnimate

公告

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜