AngularJS directive for eased iteration display
A working demo can be foud at the project's website: http://witq.github.io/ng-transiterate
The preferred installation method is just using Bower, like that:
$ bower install ng-transiterate
Remember to load the script file in your view:
Then, reference the module (
ngTransiterate) in your app:
The directive is very easy to use. The minimal working usage looks like that:
Where value is any numerical value bound to $scope. The directive sets the element's content to the supplied values and animates any changes.
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>