<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="ng-currency-mask.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Currency mask test</h1>
<div ng-controller="MainCtrl">
<h3>Masked value</h3>
<div class="form-group">
<label>Global currency</label>
<input type="text" class="form-control" ng-model="value" ng-currency-mask>
</div>
<h3>Filters</h3>
<div class="form-group">
<label for="">Currency one</label>
<input ng-model="currencyOne" type="text" class="form-control">
</div>
<div class="form-group">
<label for="">Currency two</label>
<input ng-model="currencyTwo" type="text" class="form-control">
</div>
<hr>
<h3>Unmasked value <small>ngModel true value</small></h3>
<div class="form-group">
<input class="form-control" ng-model="value" readonly>
</div>
<h3>{{ mode === 1 ? 'Masked' : 'Unmasked' }} input using currencyMask filter</h3>
<div ng-init="mode = 1">
<div class="form-group">
<button class="btn btn-default" ng-click="mode = (mode === 1 ? 2 : 1)"> Change</button>
</div>
<div class="form-group">
<label>{{ currencyOne ? currencyOne : '(?)' }} currency using currencyMask filter</label>
<textarea readonly rows="1" class="form-control" ng-bind="(value ? (value | currencyMask : (mode === 1 ? 'mask' : 'unmask') : currencyOne ) : '')"></textarea>
</div>
<div class="form-group">
<label>{{ currencyTwo ? currencyTwo : '(?)' }} currency using currencyMask filter</label>
<textarea readonly rows="1" class="form-control" ng-bind="(value ? (value | currencyMask : (mode === 1 ? 'mask' : 'unmask') : currencyTwo ) : '')"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
angular.module('app', ['ngCurrencyMask'])
.config(function ($currencyMaskProvider) {
// $currencyMaskProvider.setCurrency('BRL');
/**
* This is an example.
* It will replace all zeros with 8 numbers.
*/
// $currencyMaskProvider.addMaskMatch(/0/g, 8);
})
.controller('MainCtrl', function ($scope) {
$scope.currencyOne = 'BRL';
$scope.currencyTwo = 'USD';
});
/* Styles go here */
!function(){"use strict";angular.module("ngCurrencyMask",["ngCurrencyMask/Services","ngCurrencyMask/Directives","ngCurrencyMask/Filters","ngCurrencyMask/Providers"])}();
!function(){"use strict";angular.module("ngCurrencyMask/Service/Masker",[]).factory("Masker",["$currencyMask",function(r){var e=function(e,n){if(!e)return e;var a=e.toString();return a=a.replace(/^/,(n?n:r.currency)+" ")},n=function(n,a){var c=n.toString(),t=r.maskMatches;return t.forEach(function(r){c=r.replace instanceof Function?r.replace(c):c.replace(r.replace,r.with)}),c=e(c,a)},a=function(e){var n=e.toString(),a=r.unmaskMatches;return a.forEach(function(r){n=r.replace instanceof Function?r.replace(n):n.replace(r.replace,r.with)}),n};return{maskValue:n,unmaskValue:a}}])}();
!function(){"use strict";angular.module("ngCurrencyMask/Filter/currencyMask",[]).filter("currencyMask",["Masker",function(n){var r=function(n){switch(n){case"mask":return 1;case"unmask":return 2}},u=function(n){return null===n?null:n};return function(a,e,t){var e=e?r(e):r("mask"),c=t?u(t):u(null);if(1===e){var s=n.maskValue(a,c);return s}return 2===e?n.unmaskValue(a):void 0}}])}();
!function(){"use strict";angular.module("ngCurrencyMask/Provider/currencyMask",[]).provider("$currencyMask",function(){var e=[{replace:/(\.[0-9])(?=[0-9]{0}$)/g,"with":"$10"},{replace:/^(\d)*(?=(\d{0,})$)/g,"with":"$&,00"},{replace:/\D/g,"with":""},{replace:/^(\d{1})$/,"with":"0,0$1"},{replace:/(\d{2})$/,"with":",$1"},{replace:/,(\d{3,})$/,"with":"$1,00"},{replace:/^,(\d{2})$/,"with":"0,$1"},{replace:/(\d)(?=(\d{3})+(?!\d))/g,"with":"$1."}],r=[{replace:/\D/g,"with":""},{replace:/^(\d{1})$/,"with":"0.0$1"},{replace:/(\d{2})$/,"with":".$1"},{replace:/(,00|\.00$)/g,"with":""},{replace:/^(0{1,})/,"with":""},{replace:/^\.(\d{2})$/,"with":"0.$1"},{replace:function(e){if(!e)return"";var r=new RegExp(".(d{3,})$"),t=e.match(r);return t instanceof Array&&t[1]&&(e=e.replace(t,t.toString().substr(0,2))),e}}],t=this,c={currency:"R$",maskMatches:e,unmaskMatches:r};this.setCurrency=function(e){return c.currency=e,t},this.addUnmaskMatch=function(e,r){return c.unmaskMatches.unshift({replace:e,"with":r}),t},this.addMaskMatch=function(e,r){var a={};return r?(a.replace=e,a.with=r):a.replace=e,c.maskMatches.unshift(a),t},this.$get=function(){return c}})}();
!function(){"use strict";angular.module("ngCurrencyMask/Directives",["ngCurrencyMask/Directive/ngCurrencyMask"])}();
!function(){"use strict";angular.module("ngCurrencyMask/Filters",["ngCurrencyMask/Filter/currencyMask"])}();
!function(){"use strict";angular.module("ngCurrencyMask/Directive/ngCurrencyMask",[]).directive("ngCurrencyMask",["Masker",function(n){return{restrict:"A",require:["?ngModel"],link:function(r,e,u,t){var c=t[0],i=u.currency?u.currency:null,a=function(r){return n.maskValue(r,i)},s=function(r){return n.unmaskValue(r)},l=function(n){return s(n)};c.$parsers.push(l),r.$watch(u.ngModel,function(n){if(n&&!(n.length<1)){var r=a(n);r!=n&&(c.$setViewValue(r),c.$render())}})}}}])}();
!function(){"use strict";angular.module("ngCurrencyMask/Providers",["ngCurrencyMask/Provider/currencyMask"])}();
!function(){"use strict";angular.module("ngCurrencyMask/Services",["ngCurrencyMask/Service/Masker"])}();