2016-05-08 4 views
0

Ich bin Anfänger zu Angular js. Ich versuche, die Summe der Werte der dritten Spalte zu berechnen und das Ergebnis in die Ausfallszeit-Box zu speichern.
Hier war ich schon fertig.
1.Dynamisch Hinzufügen/Entfernen der Zeile.
2. Berechnen Sie den Unterschied zwischen der ersten Spalte und der zweiten Spalte und speichern Sie das Ergebnis in der dritten Spalte.
3. Nun, Summe der Werte der dritten Spalte und speichern in Textfeld.
Jetzt funktioniert der dritte Punkt nicht.Angular JS - Berechnen Sie die Summe der wiederholten Elemente mit ng-repeat

HTML:

<!doctype html> 
<html ng-app="Myapp"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
</head> 

<body ng-controller="myctrl"> 

    <table id="t1" style="border:none;"> 
    <tr><th>Start</th><th>Stop</th><th>Downtime(In Min)</th><th>Reason</th></tr> 
     <tr ng-repeat="item in invoice"> 
    <td><input type="text" required ng-model="$invoice.start" name="r1[]"></td> 
    <td><input type="text" required ng-model="$invoice.stop" ng-blur="diff($invoice)" name="r2[]"></td> 
    <td><input type="text" name="r3[]" ng-model="$invoice.diff"/></td> 
    <td><input type="text" ng-model="$invoice.reason" name="r4[]" ></td> 
    <td style="border:none;"><a href ng-click="remove(item)">X</a></td> 
    </tr> 
    <tr style="border:none;"> 
    <td style="border:none;"><a href ng-click="add()">+</a></td> 
    </tr> 
    </table> 
    <br/> 
    <div> 
<span class="labelCode">Total Downtime</span><input required type="text" ng-value="run()" name="Tot_D" /></span></br> 

</div> 

Angular js

var myapp=angular.module("Myapp",[]); 
    myapp.controller("myctrl",function($scope){ 

    $scope.invoice = [{ 
      start :"7:00", 
      stop:"7:30" , 
      reason: "M/C Ready to Start", 
       }] 


       $scope.add= function(){ 
          $scope.invoice.push({ 
          start:"7:30", 
          stop:"8:00" 
         }); 
       }; 
      //Remove the rows 
       $scope.remove=function(index){ 
         $scope.invoice.splice(index,1); 
        }; 

        $scope.diff = function(item) { 
     item.diff = computeDiff(item.start,item.stop); 
     } 
    function computeDiff(start, stop) { 
     if (start && stop) { 
      var s_hr = start.split(":")[0]; 
      var s_min = start.split(":")[1]; 
      var e_hr = stop.split(":")[0]; 
      var e_min = stop.split(":")[1]; 

      return Math.abs((parseInt(e_hr) - parseInt(s_hr)) * 60) + Math.abs(parseInt(e_min) - parseInt(s_min)) 
     } 
     } 
        $scope.run = function(){ 

     var total = 0; 
     for(var i = 0; i < $scope.invoice.length; i++){ 
      var product = $scope.invoice[i]; 
      total += parseInt($scope.diff()); 
     } 
     return total; 
    } 

    }); 

Summe der wiederholten Werte von dritten Spalte ist die Aktualisierung nicht in Ausfallzeiten Textfeld ein.
Ich bin nicht da, wo ich falsch liege. Bitte helfen Sie mir. Danke im Voraus.

Antwort

0

Zunächst möchte ich vorschlagen, dass Sie uns ng-init Richtlinie für jede Iteration zu berechnen, aber es ist sehr wichtig Funktionen innerhalb ng-init zu verwenden. Etwas wie folgt aus:

<tr ng-repeat="item in invoice"> 
    <td><input type="text" ... ng-init="sum(item)"></td> 
</tr> 

Dann in Ihrem Controller können Sie diese Funktion definieren und es tun, was Sie wollen, weil ng-repeatnennen, die für jede Funktion Iteration

+0

Ich habe versucht, aber es funktioniert nicht. Ich denke, es ist falsch in der Funktion. Es berechnet nichts. – user007

+0

ehrlich gesagt ist Ihr Code nicht nice.I würde viel ändern, um die Dinge besser zu bekommen –

+0

Okay.Ich weiß.Ich bin Neuling, so dass es Zeit braucht, ordentlich und ordentlich zu kodieren. – user007

Verwandte Themen