angularjs - 角指令四舍五入十进制数

Question

Angular 是否有内置指令来舍入输入值？

在这种情况下，数字过滤器不合适，因为我也想对valng-model 中的实际值进行四舍五入。如果一定要写一篇，会是什么样子？

Answer 1

您可以在表达式中使用ngBlur和：Math.round

<input type="number" ng-model="number" ng-blur="number = Math.round(number)" />

Answer 2

您可以使用指令创建两种方式的绑定转换。这是一个简单的例子：

app.directive('roundConverter', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModelCtrl) {
      function roundNumber(val) {
        var parsed = parseFloat(val, 10);
        if(parsed !== parsed) { return null; } // check for NaN
        var rounded = Math.round(parsed);
        return rounded;
      }
      // Parsers take the view value and convert it to a model value.
      ngModelCtrl.$parsers.push(roundNumber);
   }
 };
});

http://plnkr.co/edit/kz5QWIloxnd89RKtfkuE?p=preview

这实际上取决于您希望它如何工作。它应该限制用户输入吗？你介意模型和视图值不同吗？模型上的无效数字输入是否应该为空？这些都是你要做出的决定。上面的指令会将无效数字转换为 null。

Answer 3

<script>
      .controller('ExampleController', ['$scope', function($scope) {
  $scope.val = 1234.56789;
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter number: <input ng-model='val'></label><br>
  Default formatting: <span id='number-default'>{{val | number}}</span><br>
  No fractions: <span>{{val | number:0}}</span><br>
  Negative number: <span>{{-val | number:4}}</span>
</div>

输出：输入号码：1234.56789

默认格式：1,234.568

没有分数：1,235

负数：-1,234.5679

参考：https ://docs.angularjs.org/api/ng/filter/number