[英]Angularjs input ng-model only with two decimals or digits
I have a which has a default value declared in the controller and passed 'val:1.81' by ng-model. 我有一个在控制器中声明的默认值,并由ng-model传递了“ val:1.81”。 Such input must be numeric (type: number).
此类输入必须为数字(类型:数字)。 By angular filters, managed to print only two decimal places on the next line by the filter 'number 2'.
通过角度过滤器,设法通过过滤器“数字2”在下一行仅打印小数点后两位。 In addition, I need to include a couple of buttons to add or subtract '0.01' like a counter value input.
另外,我需要包括几个按钮来添加或减去“ 0.01”,就像计数器值输入一样。
Is there any way to filter the input also with only two decimals? 有什么办法也只能用两个小数来过滤输入吗? I mention this because as I sum by clicking the button, there comes a time that the input print eg '1.8800000000000001'.
我之所以这样说是因为当我通过单击按钮求和时,有时会出现输入打印,例如'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>
Please refer to https://stackoverflow.com/a/4640423 for reference about decimal precision on floats. 有关浮点数的十进制精度的参考,请参考https://stackoverflow.com/a/4640423 。
For your particular example something like this should be enough: 对于您的特定示例,这样的话就足够了:
$scope.val = parseFloat(($scope.val - 0.01).toFixed(2));
Similarly, you can also use .toPrecision(3) instead. 同样,您也可以改用.toPrecision(3)。
EDIT: I saw you also ask about how to filter user input to 2 decimal cases. 编辑:我看到你还问有关如何将用户输入筛选为2个十进制的情况。 For that case the best option is to watch changes in the value and round accordingly as @alesc suggested.
在这种情况下,最好的选择是观察值的变化并按照@alesc的建议进行相应的取整。
EDIT2: I'd suggest that you leave the logic in the controller as good practice: EDIT2:我建议您将逻辑留在控制器中作为良好做法:
$scope.increment = function(increment) {
$scope.val = parseFloat(($scope.val + increment).toFixed(2));
};
and then call in the html: 然后调用html:
<button ng-click="increment(-0.01)">-0.01</button>
<button ng-click="increment(0.01)">0.01</button>
One (IMO dirty) solution would be to watch for changes over $scope.val
and round the number to 2-digits as it happens. 一种(IMO脏)的解决方案是监视
$scope.val
更改,然后将数字四舍五入为两位数。
You just modify your controller as follows: 您只需按以下方式修改控制器:
app.controller("mainCtrl", function($scope)
{
$scope.val = 1.80;
$scope.$watch(
function(scope) {
return scope.val;
},
function(num) {
$scope.val = Math.round(num * 100) / 100;
}
);
});
This way, whenever a change happens, you overwrite the value with the 2-digit rounded value. 这样,无论何时发生更改,都可以用两位数的舍入值覆盖该值。 No other HTML and/or template changes are necessary.
无需其他HTML和/或模板更改。
JS Bin example: http://jsbin.com/viyixofova/1/ (only the first input has the rounding implemented). JS Bin示例: http : //jsbin.com/viyixofova/1/ (仅第一个输入实现了舍入)。
Ok thanks for the help, finally I use this: http://jsbin.com/gijejo/9/edit 好的,谢谢您的帮助,最后我使用了它: http : //jsbin.com/gijejo/9/edit
Last question, Is there a way to unify the increment and decrement function for any value of the input ng-model by not to repeat the parseFloat by value? 最后一个问题,是否有一种方法可以通过不重复按值重复parseFloat来统一输入ng-model的任何值的增量和减量函数?
Thanks again 再次感谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.