AngularJS - Mehrere binding - Berechnung der input-Werte

Baue ich ein großes Formular mit AngularJS ersetzt eine riesige excel-Tabelle mit einer Menge Formeln und Funktionen. Kurz gesagt, diese form ist ein Rechner, wo eine Menge von Werten sind abhängig von vorhergehenden Werten. Mein Aktueller Ansatz ist das hinzufügen von ng-änderung auf alle Eingänge auswirken, nächsten - auch das hinzufügen von watchers auf die Felder, dass der Wandel programmatisch. Ich finde diese Art von tun, ist sehr verwirrend und schwer zu pflegen. Besser mustern zu tun, die Art von Arbeit?

Das Formular ausfüllen, ich bin Gebäude besteht aus 60+ Felder, die miteinander interagieren. Alle berechneten Werte, wie "Preis" im Beispiel unterliegen auf manuelle ändern oder außer Kraft setzen. So die Berechnung der "Gesamt-Preis" im Beispiel unten sollte automatisch sein, ob der Preis berechnet sich über die vorherigen Werte oder manuell geändert werden.

Kleines Beispiel:

<div ng-app>
  <h2>Calculator</h2>

  <div ng-controller="TestCtrl">
    <form>
        <li>Width (cm): <input type="text" ng-change="changePrice()" ng-model="width"/> </li>
        <li>Height (cm): <input type="text" ng-change="changePrice()" ng-model="height"/> </li>
        <li>Depth (cm)<input type="text" ng-change="changePrice()" ng-model="depth"/>  </li>   
        <li>Price per cm3<input type="text" ng-change="changePrice()" ng-model="priceCm"/>  </li>
        <li><b>Price</b><input type="text" ng-model="price"/>  <br/><br/></li>
        <li>Packaging price<input type="text" ng-change="changeTotalPrice()" ng-model="packagePrice"/>  </li>
        <li><b>Total price</b><input type="text" ng-model="total"/>  </li>
    </form>
  </div>
</div>

JS:

function TestCtrl($scope) {
   $scope.$watch('price', function(newValue,oldValue){
    if(newValue != oldValue)
    {
        $scope.changeTotalPrice();
    }
});

$scope.changePrice = function(){
    var width = 0;
    var height = 0;
    var depth = 0;
    var priceCm = 0;

    width = $scope.width;
    height = $scope.height;
    depth = $scope.depth;
    priceCm = $scope.priceCm;

    if(width > 0 && height > 0 && depth > 0 && priceCm > 0)
    {
        $scope.price = width * height * depth * priceCm;
    }          
}

$scope.changeTotalPrice = function(){
    var price = 0;
    var packaging = 0;

    price = $scope.price;
    packaging = $scope.packagePrice;

    if(price > 0 && packaging > 0)
    {
        $scope.total = price*1 + packaging*1;
    }          
  }
}

Beispiel: http://jsfiddle.net/rewnao6p/3/

  • Nicht nur link zu einer Geige. Der Warnung, die Sie bekam, als Sie versuchte, Sie zu senden Sie die Antwort mit nur einer Geige link sollte klar genug in dieser Hinsicht. Poste bitte ein kleines Beispiel von deinem code, der das problem reproduziert, statt.
  • danke, ich habe es behoben.
InformationsquelleAutor Anze | 2014-10-27
Schreibe einen Kommentar