Auto-Wechsel zwischen 2 Eingänge mit Steuerungen

Question

Ich habe 2 Eingänge, die nur akzeptiert positive Schwimmer mit 2 Dezimalstellen (andere Zeichen sollten durch change() Funktion entfernt werden).

Wenn der Wert eines Eingangs geändert wird, wird auch der Wert des anderen Eingangs automatisch geändert.

---

Ausgabe # 1-Hauptproblem

Meine regex über 2 Dezimalstellen nicht blockiert und severals . (zB: 12.345.67 leider funktioniert) ermöglichen.

Issue # 2

Verbotene Zeichen sind auf dem Ruf von change() nicht ordnungsgemäß entfernt. Ich bekomme

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

Dies geschieht, weil replace() nur auf Strings arbeitet, und mathematischen Operatoren (+, -, *, /) funktioniert nur auf Zahlen. Ich muss beide verwenden, wie ich damit umgehen soll?

---

Hier ist mein Code, können Sie this JSFiddle verwenden, wenn Sie es selbst versuchen.

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

Für Ausgabe # 1, hier ist ein regulärer Ausdruck, der Filter genau das, was Sie wollen:

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

---

Für Issue # 2 machte ich die Berechnung in parseFloat:

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

toFixed(2) ermöglicht nur 2 Dezimalstellen nach ..

---

Schließlich legte ich den Code schwimmt in einer Richtlinie überprüft:

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

Verwendet in HTML wie folgt aus:

<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> 

So change() Funktion sieht nun wie folgt aus:

$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

Was ist mit der Eingabe typ = "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; 
       } 
    } 
}