在兩個輸入之間自動更改控件

Question

我有2個輸入，只接受帶2位小數的正浮點數（其他字符應該被change()函數刪除）。

當輸入值改變時，另一個輸入的值也會自動改變。

---

問題＃1 - 主要問題

我的正則表達式不會阻止超過2位小數，並允許severals .（如：12.345.67黯然工作）。

問題2：

禁止字符不正確對change()的通話中移除。我得到

Error: $scope.uc.replace is not a function

這是因爲replace()僅適用於字符串和數學運算符（+，-，*，/）僅適用於數字。我需要同時使用，如何處理它？

---

這是我的代碼，如果你想親自嘗試，可以使用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

怎麼樣用input type =「number」代替？ 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; 
       } 
    } 
}