使用angularjs将数字显示为float

Question

我要求有一个文本框来输入金额。我们应该限制输入特殊字符和小数点。我已经使用自定义过滤器完成了限制部分。在同一文本框上有一个要求，自动显示输​​入的数字，以两个小数点浮动。当我添加过滤器

任何人都可以建议我使用angularjs实现这一目标。

这是输入文本

Answer 1

我编写了一个指令来限制输入到float：

.directive('floatOnly', function() {
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, element, attrs, modelCtrl) {
      modelCtrl.$parsers.push(function(inputValue) {
        if (inputValue === undefined) return '';

        // Remove forbidden characters
        cleanInputValue = inputValue.replace(',', '.') // change commas to dots
          .replace(/[^\d.]/g, '') // keep numbers and dots
          .replace(/\./, "x") // change the first dot in X
          .replace(/\./g, "") // remove all dots
          .replace(/x/, "."); // change X to dot
        if (cleanInputValue != inputValue) {
          modelCtrl.$setViewValue(cleanInputValue);
          modelCtrl.$render();
        }
        return cleanInputValue;
      });
    }
  }
});

您可以按照以下方式使用它：

<input type="text" ng-model="myFloat" float-only/>

测试片段：

＆＃13;

＆＃13;

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {

}]).directive('floatOnly', function() {
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, element, attrs, modelCtrl) {
      modelCtrl.$parsers.push(function(inputValue) {
        if (inputValue === undefined) return '';

        // Remove forbidden characters
        cleanInputValue = inputValue.replace(',', '.') // change commas to dots
          .replace(/[^\d.]/g, '') // keep numbers and dots
          .replace(/\./, "x") // change the first dot in X
          .replace(/\./g, "") // remove all dots
          .replace(/x/, "."); // change X to dot
        if (cleanInputValue != inputValue) {
          modelCtrl.$setViewValue(cleanInputValue);
          modelCtrl.$render();
        }
        return cleanInputValue;
      });
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    Float only: <input type="text" ng-model="myFloat" float-only/>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Test it on JSFiddle

尝试在输入中输入任何内容