Working Fiddle

Question

我有2个输入只接受带有2位小数的正浮点数（其他字符应由change()函数删除）。

当输入值改变时，另一个输入的值也会自动改变。

问题＃1 - 主要问题

我的正则表达式不会阻止超过2位小数并且允许多个.（例如：12.345.67可悲地工作）。

问题＃2

在change()的通话中未正确删除禁止的字符。我得到了

错误：$ scope.uc.replace不是函数

这是因为replace()仅适用于字符串，而数学运算符（+，-，*，/）仅适用于数字。我需要同时使用它们，如何处理它？</ p>

以下是我的代码，如果您想亲自试用，可以使用this JSFiddle。

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.coeff = 0.5;
    $scope.uf = '25';
    $scope.uc = '';
    
    $scope.change = function(type) {
        console.log(type, "changes!");
        
        $scope.uf = $scope.uf.replace(',', '.');
        $scope.uf = $scope.uf.replace(/[^\d.-]/g, '');
        $scope.uc = $scope.uc.replace(',', '.');
        $scope.uc = $scope.uc.replace(/[^\d.-]/g, '');
        
        if(type == 'uf') {
            $scope.uc = $scope.uf * $scope.coeff;
        } else if(type == 'uc') {
            $scope.uf = $scope.uc / $scope.coeff;
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <input type="text" ng-model="uf" ng-change="change('uf')"/>
  <input type="text" ng-model="uc" ng-change="change('uc')"/>
</div>

Answer 1

对于问题＃1 ，这里有一个正则过滤器，可以过滤您想要的内容：

$scope.uf = $scope.uf.replace(',', '.')
                     .replace(/[^\d.]/g, '')
                     .replace(/\./, "x")
                     .replace(/\./g, "")
                     .replace(/x/, ".");

对于问题＃2 ，我在parseFloat中进行了计算：

$scope.uc = +parseFloat($scope.uf * $scope.coeff).toFixed(2);
$scope.uf = +parseFloat($scope.uf = $scope.uc / $scope.coeff).toFixed(2);

toFixed(2)仅允许.之后的2位小数。

最后，我将代码检查浮点数放在一个指令中：

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

                cleanInputValue = inputValue.replace(',', '.')
                                            .replace(/[^\d.]/g, '')
                                            .replace(/\./, "x")
                                            .replace(/\./g, "")
                                            .replace(/x/, ".");
                if(cleanInputValue != inputValue) {
                    modelCtrl.$setViewValue(cleanInputValue);
                    modelCtrl.$render();
                }
                return cleanInputValue;
            });
        }
    }
});

在HTML中使用：

<div ng-controller="MyCtrl">
  <input type="text" ng-model="uf" ng-change="change('uf')" float-only/>
  <input type="text" ng-model="uc" ng-change="change('uc')" float-only/>
</div>

所以change()函数现在看起来像这样：

$scope.change = function(type) {
    console.log(type, "changes!");

    if(type == 'uf') {
        $scope.uc = +parseFloat($scope.uf * $scope.coeff).toFixed(2);
    } else if(type == 'uc') {
       $scope.uf = +parseFloat($scope.uf = $scope.uc / $scope.coeff).toFixed(2);
    }
 }

Working Fiddle

Answer 2

如何使用输入类型=＆＃34;数字＆＃34;代替？ http://jsfiddle.net/Lvc0u55v/7192/

<div ng-controller="MyCtrl">
  <input type="number" step="0.01" ng-model="uf" ng-change="change('uf')"/>
  <input type="number" step="0.01" ng-model="uc" ng-change="change('uc')"/>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.coeff = 0.5;
    $scope.uf = "25";
    $scope.uc = "";

    $scope.change = function(type) {
        console.log(type, "changes!");

        if(type == 'uf') {
            $scope.uc = $scope.uf * $scope.coeff;
        } else if(type == 'uc') {
            $scope.uf = $scope.uc / $scope.coeff;
              }
    }
}

使用控件

2 个答案:

Working Fiddle