My question involves an input field with a default value set in the controller and passed as 'val:1.81' using ng-model. This input must only accept numeric values (type: number). Through Angular filters, I have managed to display only two decimal places on the next line using the 'number 2' filter. Additionally, I am looking to include buttons that will allow users to add or subtract '0.01', similar to a counter input.
Is there a way to ensure that the input is filtered to display only two decimals? I ask this because when summing by clicking the button, sometimes the input displays something like '1.8800000000000001'.
var app = angular.module('myApp', []);
app.controller("mainCtrl", function($scope)
{
$scope.val = 1.80;
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
<br/><br/>
<div>
<span style="color: red">Val input:</span>
<input type="number" ng-model="val"/>
<button ng-click="val = val - 0.01">-0.01</button>
<button ng-click="val = val + 0.01">+0.01</button>
</div>
<div>Val: {{val | number:2}}</div>
<hr>
Val2 (val + 20): {{ val2 = val + 20 | number:2 }}
<hr>
Val2 input:
<input type="number" ng-model="val2"/>
</div>