feat(ui-percentage-value): add attribute ui-percentage-value to use a…

…nd as the same

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_size = 4
+indent_style = tab
+

.gitignore

@@ -4,3 +4,8 @@ node_modules
 coverage
 npm-debug.log
 releases
+
+.DS_Store
+*.swp
+.idea
+*.iml

README.md

@@ -67,12 +67,18 @@ bower install --save angular-input-masks
 <input type="text" name="field" ng-model="percentage" ui-percentage-mask="4">
 ```
 
+- The $modelValue is the $viewValue / 100, so $viewValue - 100% = $modelValue - 1
+
+- You can use the same value in $modelValue and $viewValue using ```ui-percentage-value```:
+
+```html
+<input type="text" name="field" ng-model="percentage" ui-percentage-mask ui-percentage-value>
+```
+
 - Support to the ```min```, ```max``` and ```ui-hide-group-sep``` attributes.
 
 - Internationalized: Used the decimal separator and thousands separator defined in the client browser configuration.
 
-- The $modelValue is the $viewValue / 100, so $viewValue - 100% = $modelValue - 1
-
 ### ui-money-mask ###
 
  - Example:

demo/index.html

@@ -63,8 +63,8 @@ <h2>ui-number-mask</h2>
 		<br>
 
 		<h2>ui-percentage-mask</h2>
-		<input type="text" name="field5" ng-model="percentageWithDefaultDecimals" ui-percentage-mask> <br>
-		<span ng-bind="percentageWithDefaultDecimals"></span>
+		$viewValue - <input type="text" name="field5" ng-model="percentageWithDefaultDecimals" ui-percentage-mask> <br>
+		$modelValue - <span ng-bind="percentageWithDefaultDecimals"></span>
 		<br>
 		<input type="text" name="field6" ng-model="percentageWith4Decimals" ui-percentage-mask="4" min="percentageWithDefaultDecimals" max="115"> <br>
 		<span ng-bind="percentageWith4Decimals"></span> - {{form.field6.$error}}
@@ -73,6 +73,10 @@ <h2>ui-percentage-mask</h2>
 		Decimals: <input type="text" name="field26" ng-model="pdecimals" ui-number-mask=0><br>
 		<span ng-bind="percentWithDynamicDecimals"></span> - {{form.field25.$error}}
 		<br>
+		<h4>ui-percentage-value</h4>
+		$viewValue - <input type="text" name="field6" ng-model="percentageValue" ui-percentage-mask="4" ui-percentage-value min="percentageWithDefaultDecimals" max="115"> <br>
+		$modelValue - <span ng-bind="percentageValue"></span>
+		<br />
 
 		<h2>ui-br-cpf-mask</h2>
 		<i>Same as the deprecated <b>ui-cpf-mask</b></i><br><br>

src/global/percentage/percentage.js

@@ -1,6 +1,6 @@
 function PercentageMaskDirective($locale, $parse, PreFormatters, NumberMasks, NumberValidators) {
-	function preparePercentageToFormatter (value, decimals) {
-		return PreFormatters.clearDelimitersAndLeadingZeros((parseFloat(value)*100).toFixed(decimals));
+	function preparePercentageToFormatter (value, decimals, modelMultiplier) {
+		return PreFormatters.clearDelimitersAndLeadingZeros((parseFloat(value)*modelMultiplier).toFixed(decimals));
 	}
 
 	return {
@@ -11,15 +11,25 @@ function PercentageMaskDirective($locale, $parse, PreFormatters, NumberMasks, Nu
 				thousandsDelimiter = $locale.NUMBER_FORMATS.GROUP_SEP,
 				decimals = parseInt(attrs.uiPercentageMask);
 
+			var modelValue = {
+				multiplier : 100,
+				decimalMask: 2 
+			};
+
 			if (angular.isDefined(attrs.uiHideGroupSep)){
 				thousandsDelimiter = '';
 			}
 
+			if (angular.isDefined(attrs.uiPercentageValue)) {
+				modelValue.multiplier  = 1;
+				modelValue.decimalMask = 0;
+			}
+
 			if(isNaN(decimals)) {
 				decimals = 2;
 			}
 
-			var numberDecimals = decimals + 2;
+			var numberDecimals = decimals + modelValue.decimalMask;
 			var viewMask = NumberMasks.viewMask(decimals, decimalDelimiter, thousandsDelimiter),
 				modelMask = NumberMasks.modelMask(numberDecimals);
 
@@ -28,7 +38,7 @@ function PercentageMaskDirective($locale, $parse, PreFormatters, NumberMasks, Nu
 					return value;
 				}
 
-				var valueToFormat = preparePercentageToFormatter(value, decimals);
+				var valueToFormat = preparePercentageToFormatter(value, decimals, modelValue.multiplier);
 				return viewMask.apply(valueToFormat) + ' %';
 			}
 
@@ -60,7 +70,13 @@ function PercentageMaskDirective($locale, $parse, PreFormatters, NumberMasks, Nu
 					if(isNaN(decimals)) {
 						decimals = 2;
 					}
-					numberDecimals = decimals + 2;
+
+					if (angular.isDefined(attrs.uiPercentageValue)) {
+						modelValue.multiplier  = 1;
+						modelValue.decimalMask = 0;
+					}
+
+					numberDecimals = decimals + modelValue.decimalMask;
 					viewMask = NumberMasks.viewMask(decimals, decimalDelimiter, thousandsDelimiter);
 					modelMask = NumberMasks.modelMask(numberDecimals);
 

src/global/percentage/percentage.test.js

@@ -99,4 +99,30 @@ describe('ui-percentage-mask', function() {
 		input.val('99990').triggerHandler('input');
 		expect(model.$valid).toBe(true);
 	});
+
+	it('should format initial model values with percentage value', function() {
+		var input = TestUtil.compile('<input ng-model="model" ui-percentage-mask ui-percentage-value>', {
+			model: '1234.5'
+		});
+
+		var model = input.controller('ngModel');
+		expect(model.$viewValue).toBe('1,234.50 %');
+	});
+
+	it('should allow changing the number of decimals', inject(function($rootScope) {
+		var input = TestUtil.compile('<input ng-model="model" ui-percentage-mask="decimals" ui-percentage-value>', {
+			model: '1234.501',
+			decimals: 2
+		});
+
+		var model = input.controller('ngModel');
+		expect(model.$viewValue).toBe('1,234.50 %');
+		$rootScope.decimals = 3;
+		$rootScope.$digest();
+		expect(model.$viewValue).toBe('123.450 %');
+		$rootScope.decimals = 'invalid value';
+		$rootScope.$digest();
+		expect(model.$viewValue).toBe('1,234.50 %');
+	}));
+
 });