JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-controller="fessCntrl">Example
<input type="text" ng-model="test" format="number" /> <pre>{{test|json}}</pre>
</div>
JavaScript
var fessmodule = angular.module('myModule', []);
fessmodule.controller('fessCntrl', function ($scope) {
$scope.test = 100;
});
fessmodule.$inject = ['$scope'];
fessmodule.directive('format', ['$filter', function ($filter) {
return {
require: '?ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl) return;
var format = {
prefix: '',
centsSeparator: ',',
thousandsSeparator: ''
};
ctrl.$parsers.unshift(function (value) {
elem.priceFormat(format);
console.log('parsers', elem[0].value);
return elem[0].value;
});
ctrl.$formatters.unshift(function (value) {
elem[0].value = ctrl.$modelValue * 100 ;
elem.priceFormat(format);
console.log('formatters', elem[0].value);
return elem[0].value ;
})
}
};
}]);
(function ($) {
$.fn.priceFormat = function (options) {
var defaults = {
prefix: 'US$ ',
suffix: '',
centsSeparator: '.',
thousandsSeparator: ',',
limit: false,
centsLimit: 2,
clearPrefix: false,
clearSufix: false,
allowNegative: false,
insertPlusSign: false
};
var options = $.extend(defaults, options);
return this.each(function () {
var obj = $(this);
var is_number = /[0-9]/;
var prefix = options.prefix;
var suffix = options.suffix;
var centsSeparator = options.centsSeparator;
var thousandsSeparator = options.thousandsSeparator;
var limit = options.limit;
var centsLimit = options.centsLimit;
var clearPrefix = options.clearPrefix;
var clearSuffix = options.clearSuffix;
...