It can be used in the UI to show the model-value with comma separating and by appending the percentage or any other symbol
Often we come across the cases where we need to format the values to represent in the UI while the database or the model objects at the front end stores them unformatted for calculation/some-other-purposes.
- Dependency Registration in JS
var module = ng.module('your-module-name', ['form.input.formatter']);- In HTML-Template (Either of the following)
<input input-formatter="number" type="text" ng-model="your-model"/>
<input input-formatter="number:3" type="text" ng-model="your-model"/>
<input input-formatter="currency" type="text" ng-model="your-model"/>
<input input-formatter="currency:£" type="text" ng-model="your-model"/>
<input input-formatter="currency:$:2" type="text" ng-model="your-model"/>
<input input-formatter="currency:$:2" type="text" ng-model="your-model" allow-negative="true"/>
<input input-formatter="percentage:%" type="text" ng-model="your-model"/>
<input input-formatter="percentage:#:2" type="text" ng-model="your-model"/>
<input input-formatter="percentage:%" type="text" ng-model="your-model" allow-negative="true"/>
<span>
{{your-model | percentage:'#':2}}
</span>
<span>
{{your-model | percentage}}
</span>NOTE:
-
As per the convention I am prepending the currency symbol and appending the percentage symbol.
-
At the time of initialisation the values from the server side are sanitised to show in the UI. for example
- 3423.00 --->
3,423(for number and precision = any) - 3423.4300 --->
$3,423.4(for currency and precision = 1) - 3423.4300 --->
3,423.43%(for percentage and precision = 2 or more) - null ---> NaN --->
0(for number and precision = 0) - undefined ---> NaN --->
$0(for currency and precision = 0)
- 3423.00 --->
Existing Minor Issues
1. Sometimes the cursor position is not very accurate.
2. The negative numbers are yet to be supported for the number directive. (Else it works fine for the currency
and percentage directive)
3. The `,` can not be deleted manually inside the input box -- Which is fine for the formatted number.
4. ...
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent