javascript - Angularjs输入ng-model仅包含两位小数或数字

Question

我有一个在 Controller 中声明了默认值并由 ng-model 传递“val:1.81”的值。此类输入必须是数字(类型:数字)。通过 Angular 过滤器，设法通过过滤器“数字 2”在下一行仅打印两位小数。此外，我需要添加几个按钮来添加或减去“0.01”，就像计数器值输入一样。

有什么方法可以仅使用两位小数来过滤输入吗？我提到这一点是因为当我通过单击按钮求和时，有时输入会打印“1.8800000000000001”。

Original JS Bin

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>

Answer 1

一个(IMO 肮脏的)解决方案是监视 $scope.val 的变化，并在发生变化时将数字四舍五入为 2 位数字。

您只需按如下方式修改您的 Controller :

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;
      }
  );
});

这样，每当发生更改时，您都会用 2 位四舍五入的值覆盖该值。无需更改其他 HTML 和/或模板。

JS Bin 示例:http://jsbin.com/viyixofova/1/ (只有第一个输入实现了舍入)。