AngularJS directive for eased iteration display
0 people use it
Author: 807449? witq


AngularJS directive for eased iteration display



A working demo can be foud at the project's website:


The preferred installation method is just using Bower, like that:

$ bower install ng-transiterate

Remember to load the script file in your view:

<script src="bower_components/ng-transiterate/dist/ng-transiterate.js"></script>

Then, reference the module (ngTransiterate) in your app:

angular.module('myApp', ['ngTransiterate']);


The directive is very easy to use. The minimal working usage looks like that:

<div transiterate="value"></div>

Where value is any numerical value bound to $scope. The directive sets the element's content to the supplied values and animates any changes.

Optional attributes


Sets the animation duration in miliseconds. Default is 800.

<div transiterate="value" duration="6000"></div>


Sets the easing method. This can be any of the Robert Penner's easing functions. Default it "easeInOutExpo".

<div transiterate="value" easing="easeOutQuad"></div>


Sets how precisely should floating numbers be displayed. Default is 0 (display as rounded integers). This parameter is used only when no filter is selected.

<div transiterate="value" precision="2"></div>


Sets which angular filter the directive should use for display. Default is none. If a filter requires parameters, they should be passed like that: number:3. This sets the filter to number with optional fractionSize parameter.

<div transiterate="value" filter="number:3"></div>

comments powered by Disqus
This page was last updated almost 4 years ago.