I have a float value for the ng-model that I would like to always display with 2 decimal places in the <input>:
<input ng-model="myNumb" step ="0.01" type="number">
This works for most case when "myNumb" has decimal. But it will not force display of the 2 decimal places if "myNumb" has less than 2 decimal places (3.2), or an integer(30)
How can I force a display of 2 decimal place in the <input> field
AngularJS - Input number with 2 decimal places it could help...
Filtering:
Set the regular expression to validate the input using ng-pattern. Here I want to accept only numbers with a maximum of 2 decimal places and with a dot separator.
<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal | number : 2" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" />
Reading forward this was pointed on the next answer ng-model="myDecimal | number : 2".
If you are using Angular 2 (apparently it also works for Angular 4 too), you can use the following to round to two decimal places{{ exampleNumber | number : '1.2-2' }}, as in:
<ion-input value="{{ exampleNumber | number : '1.2-2' }}"></ion-input>
BREAKDOWN
'1.2-2' means {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}:
A minimum of 1 digit will be shown before decimal point
It will show at least 2 digits after decimal point
But not more than 2 digits
Credit due here and here
{{value | number : fractionSize}}
like {{12.52311 | number : 2}}
so this will print 12.52
Simply use the number pipe like so :
{{ numberValue | number : '.2-2'}}
The pipe above works as follows :
Show at-least 1 integer digit before decimal point, set by default
Show not less 2 integer digits after the decimal point
Show not more than 2 integer digits after the decimal point
Did you try using the filter
<input ng-model='val | number: 2'>
https://docs.angularjs.org/api/ng/filter/number
Another shorthand to (#maudulus's answer) to remove {maxFractionDigits} since it's optional.
You can use {{numberExample | number : '1.2'}}
best way to Round off number to decimal places is that
a=parseFloat(Math.round(numbertobeRound*10^decimalplaces)/10^decimalplaces);
for Example ;
numbertobeRound=58.8965896589;
if you want 58.90
decimalplaces is 2
a=parseFloat(Math.round(58.8965896589*10^2)/10^2);
(Math.round(2.782061* 100 )/100).toFixed(2);
This will convert that into Two decimal places:
For Ex: 2.782061 ---> 2.78 two decimal Places
Use currency filter with empty symbol ($)
{{val | currency:''}}
Related
I have the following piece of code. I want to format numbers with string templates. One variable has 2 decimal places, the other 4 decimal places but they represent the same number 50000 (fifty thousand).
The first number is correctly formatted (German representation) 50.000,00, the other one however is formatted as 5 million 5.000.000,00!
DATA: lv_p2 TYPE p LENGTH 9 DECIMALS 2,
lv_p4 TYPE p LENGTH 14 DECIMALS 4.
START-OF-SELECTION.
lv_p2 = '50000'.
lv_p4 = lv_p2.
SET COUNTRY 'DE'.
"This is correctly formatted as 50.000,00
WRITE |{ lv_p2 NUMBER = ENVIRONMENT CURRENCY = 'EUR' }|.
"This is on the other hand interpreted as five million! 5.000.000,00
WRITE |{ lv_p4 NUMBER = ENVIRONMENT CURRENCY = 'EUR' }|.
Is this documented somewhere? What am I doing wrong here?
EDIT:
It looks like the problem is with the addition CURRENCY. If I don't use it, then the number is correctly formatted.
WRITE |{ lv_p4 NUMBER = ENVIRONMENT }|.
or WRITE |{ lv_p4 NUMBER = ENVIRONMENT DECIMALS = 2 }|.
Anyway looks like some kind of a bug.
I believe this behaviour is documented.
ABAP Documentation - WRITE, format_options - CURRENCY cur
When CURRENCY is added:
"For data objects of type p, the decimal places determined by the
definition of the data type are ignored completely. Independently of
the actual value and without rounding, decimal separators and
thousands separators are inserted between the digits in the places
determined by cur."
Shortly: if CURRENCY is added (by WRITE), the number of decimal places is determined by the currency (in this case EUR has 2 decimal places), so the value 50.000,0000 will be 5.000.000,00. Same length (9 digits) only the number of decimals will be different.
I have an input of type number, the value in this input will be saved in a column of type number(12,2), so I want to set the max length to 12 (12 digits in total,
2 of which are after the decimal point).
I tried as following :
<input type="number" md-maxlength="12" ng-pattern="/^[0-9]{0,10}([,.][0-9]{0,2})?$/" step="0.01" ..>
Whenver I type something it's invalid, this only occurs when I add the md-maxlength="12" which I use to display the max length under the input field.
As you can see in the picture the input is invalid.
How can I solve this ?
Edit:
ng-maxlength instead of md-maxlength resolves this issue but the x/12 label under the input which indicates the max length is not displayed anymore.
Edit 2:
The regex now indicates that only 10 number are allowed before decimal point (comma or dot) and 2 are optional after, you can see that the regex is working just fine here : https://regex101.com/r/fdDLFP/3, the problem is when I add the md-maxlength.
I'm using regex for validating numbers in angularjs. But my code shows validation error when the number exceeds 9 digits.Could someone please help me to rectify my code such that any digits of number can be entered.
What I have tried is :
ng-pattern="/^\d{0,9}?$/"
Just remove the {0,9}? and use * instead like
/^\d*$/
{0,9} mean is any length between 0 and 9
I suspect the problem is understanding the difference between:
{0,9}
[0-9]
{0,9} means "zero to 9 repetitions of the preceding term", which in this case means "zero to 9 digits".
[0-9] means "a character in the range 0 to 9 (inclusive)", which is the same as \d.
Try:
/^\d+$/
Which means "all numeric input" and excludes blank input.
To allow decimal input too, escape the dot and make the decimal part optional:
/^\d+(\.\d+)?$/
Which means "at least one digit, optionally followed by a dot and at least one digit".
Just change the {0,9} quantifier with the *. And remove the ? -- it's useless:
ng-pattern="/^\d*$/"
For decimal values:
ng-pattern="/^\d*(\.\d+)?$/"
Use :
"/^\d*?$/"
\d{0,9} = match 0 to 9 digits
\d* = match 0 to N digits
\d = digit : 0 or 1 or 2 or 3 or 4 or 5 or 6 or 7 or 8 or 9
I have an integer like 12345. I want to apply a simple filter in AngularJS in order to get two decimal places:
123.45
Update: Thanks to #benohead for the solution:
{{val/100 | number:2}}
All you need is divide 12345 by 100 and then use the number filter to display 2 digits after the comma e.g.:
{{val/100 | number:2}}
I want to create a new filter such that i get an input, and i give the amount of maximum decimals to show and return a string that is formatted according to locale.
Input(number) Output for 1 decimal Output for 2 decimals
1.01 1 1.01 / 1,01
1.001 1 1
1.1 1.1 / 1,1 1.1 / 1,1
1 1 1
1000 1 000 / 1.000 / 1,000 1 000 / 1.000 / 1,000
I want to use angular's built in number filter for locale purposes, but i can't come up with how to remove decimals since if i do it after number filter, then i have a locale specific string, and i cant do it before, since i don't know how to round before i have used number:x
Any hints or ideas?
Added my own filter, implemented as such:
app.filter('numberNoDecimalsIfZeroFilter', function($filter) {
return function(value, fractionSize) {
//If has no decimals, then don't show
if(value%1 === 0){
fractionSize = 0;
}
return $filter('number')(value,fractionSize);
}
});
Used as such:
<div class="form-group">
<label class="control-label">Amount: </label>
{{::value.amount | numberNoDecimalsIfZeroFilter}}
</div>
You can't, see filter's implementation:
// format fraction part.
while (fraction.length < fractionSize) {
fraction += '0';
}
The filter always adds zeros. If you want to achieve what you want, you have to write your own filter.