angular js | Tech Tips & Tricks

Currency Mask For Angular JS Directive

May 13, 2015 by blogmeister·0 Comments

This is my custom Currency Mask for Angular JS Directive.

.directive('currencyMask', function() {
	return {
		restrict: 'A',
		require: 'ngModel',
		link: function (scope, elem, attrs, controller) {		
		    elem.bind('blur', function() {
			elem.val(formatNumberWithCommasAndDecimal(scope.$eval(attrs.ngModel), true));
		    });
		    controller.$parsers.push(function(value) {
			if (value) {
			    value = formatNumberWithCommasAndDecimal(value, false);
			    controller.$setViewValue(value);
			    controller.$render();
			}
			return value;
		    });
		    controller.$formatters.push(function(value) {
			if (value) value = formatNumberWithCommasAndDecimal(value, true);
			return value;
		    });
		}
	};
});
function formatNumberWithCommasAndDecimal(value, addExtraZero) {
	if (!value) return;
	if (addExtraZero == undefined) addExtraZero = false;
	value = value.toString();
    value = value.replace(/,/g, '').replace(/[^1-9][^0-9\.]/g, '');
    // parse[0] are digits. parse[1] is decimal
	var parts = value.split('.');
	if (parts.length > 2) {
		// if user puts in more dots, merge them again but remove other dots except first one found,
		// then split again
		dummy = '';
		for (i=0; i<parts.length; i++) {
			dummy += parts[i];
			if (i == 1) dummy += '.';
		}
		parts = dummy.split('.');
	}
	// if there are trailing 0s at the beginning, convert to float to remove them
	// then convert back to string
	parts[0] = parseFloat(parts[0]) + '';
    // parse by thousand adding comma
    var rev = parts[0].split("").reverse().join("");
    var dum = '';
    for (var i=0; i<rev.length; i++) {
        if (i > 0 && i % 3 == 0) {
            dum += ',';
        }
        dum += rev.charAt(i);
    }
    if (dum.length > 0) parts[0] = dum.split("").reverse().join("");
	if (parts[1] && parts[1].length > 2) {
		parts[1] = parts[1].substring(0, 2);
	}
	// if no decimal found but dot is present
	if (addExtraZero) {
		if (parts[1]) {
			if (parts[1] == '') parts[1] = '00';
			else if (parts[1].length == 1) parts[1] += '0';
		}
		else {
			if (parts[0].length > 0) parts[0] += '.00';
		}
	}
	return parts.join('.');
}

.directive('currencyMask', function() {

return {

restrict: 'A',

require: 'ngModel',

link: function (scope, elem, attrs, controller) {

elem.bind('blur', function() {

elem.val(formatNumberWithCommasAndDecimal(scope.$eval(attrs.ngModel), true));

});

controller.$parsers.push(function(value) {

if (value) {

value = formatNumberWithCommasAndDecimal(value, false);

controller.$setViewValue(value);

controller.$render();

}

return value;

});

controller.$formatters.push(function(value) {

if (value) value = formatNumberWithCommasAndDecimal(value, true);

return value;

});

}

};

});

function formatNumberWithCommasAndDecimal(value, addExtraZero) {

if (!value) return;

if (addExtraZero == undefined) addExtraZero = false;

value = value.toString();

value = value.replace(/,/g, '').replace(/[^1-9][^0-9\.]/g, '');

// parse[0] are digits. parse[1] is decimal

var parts = value.split('.');

if (parts.length > 2) {

// if user puts in more dots, merge them again but remove other dots except first one found,

// then split again

dummy = '';

for (i=0; i<parts.length; i++) {

dummy += parts[i];

if (i == 1) dummy += '.';

}

parts = dummy.split('.');

}

// if there are trailing 0s at the beginning, convert to float to remove them

// then convert back to string

parts[0] = parseFloat(parts[0]) + '';

// parse by thousand adding comma

var rev = parts[0].split("").reverse().join("");

var dum = '';

for (var i=0; i<rev.length; i++) {

if (i > 0 && i % 3 == 0) {

dum += ',';

}

dum += rev.charAt(i);

}

if (dum.length > 0) parts[0] = dum.split("").reverse().join("");

if (parts[1] && parts[1].length > 2) {

parts[1] = parts[1].substring(0, 2);

}

// if no decimal found but dot is present

if (addExtraZero) {

if (parts[1]) {

if (parts[1] == '') parts[1] = '00';

else if (parts[1].length == 1) parts[1] += '0';

}

else {

if (parts[0].length > 0) parts[0] += '.00';

}

return parts.join('.');

}

Form Undefined In Bootstrap Modal Dialog Under Angular JS

April 25, 2015 by blogmeister·0 Comments

So when I was using Angular JS, I wanted to set the form in a modal dialog window back to its pristine state whenever it was shown.

Problem was, the form is always undefined. If I place a code within the modal window, the form exists but when I call it in a Javascript function, it is undefined.

The solution is to add $parent to your form name like this:

<form name="$parent.myForm"> ...

1	<form name="$parent.myForm"> ...

This will automatically create the form object in your parent controller. Then, you can simply access it using the scope like $scope.myForm.

Angular JS Directive For Number Range

March 28, 2015 by blogmeister·0 Comments

Here is my custom Angular JS Directive to ensure user input is within the valid number range. The code works like this:

The user input is parsed by a regex expression to ensure that only digits are allowed.
Once it gets parsed, it will check if the value is within the number range specified using range-min and range-max attributes.
If it is below the range minimum, set the ngModel value to the range minimum value.
If it is more than the range maximum, set the ngModel value to the range maximum value.

Here is the Javascript code for the directive.

module.directive('range', function() {
	return {
		restrict: 'A',
		require: '?ngModel',
		link: function (scope, element, attrs, ngModel) {
			if (!ngModel) return;
			ngModel.$parsers.push(function(val) {
				var parsed = val.replace(/[^0-9]+/g, '');
				if (parseInt(parsed) > parseInt(attrs.rangeMax)) parsed = attrs.rangeMax;
				if (parseInt(parsed) < parseInt(attrs.rangeMin)) parsed = attrs.rangeMin
				if (val !== parsed) {
					ngModel.$setViewValue(parsed);
					ngModel.$render();
				}
				return parsed;
			});
		}
	};
});

module.directive('range', function() {

return {

restrict: 'A',

require: '?ngModel',

link: function (scope, element, attrs, ngModel) {

if (!ngModel) return;

ngModel.$parsers.push(function(val) {

var parsed = val.replace(/[^0-9]+/g, '');

if (parseInt(parsed) > parseInt(attrs.rangeMax)) parsed = attrs.rangeMax;

if (parseInt(parsed) < parseInt(attrs.rangeMin)) parsed = attrs.rangeMin

if (val !== parsed) {

ngModel.$setViewValue(parsed);

ngModel.$render();

}

return parsed;

});

}

};

});

And here is the sample HTML code.

<input type="text" range range-min="1" range-max="100"/>

1	<input type="text" range range-min="1" range-max="100"/>

A good case scenario to apply this directive is for input fields for percentage where 1-100 is your number range.

Tech Tips & Tricks

tech tips gadgets programming software

Category: angular js

Currency Mask For Angular JS Directive

Angular JS Directive For Number Range