Angular JS: Summation von Spalten am Ende der Tabelle mit zwei Daten und auch Suchfeld

Question

Ich bin ein Neuling zu Angualr js. Die zwei wichtigsten Ziele:
1. Zwischen dem Datum Filter, Summation von Nobot und Total Downtime sollte berechnet werden.

Start Date :2016-08-02 End Date:2016-08-06 
    J_Id  M_Date   Total Downtime Nobot 
    A  2016-08-01  230   230 
    B  2016-08-02  150   540 
           380   770 

2. Nach J_Id sollte das Gleiche wie oben berechnet werden. Für zB:

Search Box: C 
J_Id  M_Date   Total Downtime Nobot 
C  2016-08-22  250   250 
C  2016-07-01  150   150 
          400   400  

HTML:

<input type="text" name="search"/> 
<table> 
<tr> 
<th>Total Downtime</th> 
<th>Total Runtime</th> 
<th>Issued Bottles </th> 
<th>Actual Production</th> 
</tr> 
<tr ng-repeat="user in result| filtered: startDate: endDate | filter:search"> 
          <td>{{user.J_Id}}</td> 
          <td>{{user.M_Date | date:'yyyy-MM-dd'}}</td> 
          <td>{{user.Tot_D | filter:{"J_Id":search}}}</td> 
          <td>{{user.NoBot}}</td> 

        </tr> 

<tr> 

         <td>{{result| sumOfValue:'J_Id'}}</td> 
         <td>{{result| sumOfValue:'M_Date'}}</td> 
         <td>{{result | sumOfValue:'Tot_D'}}</td> 
         <td>{{result | sumOfValue:'NoBot'}}</td> 

         </tr> 
</table> 

Angular JS: 
<script> 
    var app = angular.module('myApp', []); 



    app.filter('sumOfValue', function() { 
    return function (data, key) { 
     debugger; 
     if (angular.isUndefined(data) && angular.isUndefined(key)) 
      return 0;   
     var sum = 0; 

     angular.forEach(data,function(v,k){ 
      sum = sum + parseInt(v[key]); 
     });   
     return sum; 
    } 
}); 

app.controller('MainCtrl',function($scope,$http){ 
$scope.startDate = "2016-05-08"; 
    $scope.endDate = "2016-05-09"; 

    $scope.result = [ 
     { 
      "J_Id":'A' 
      "M_Date" : "2016-08-01", 
      "Tot_D" : 230, 
      "Nobot":150 

     },{ 
      "J_Id":'B' 
      "M_Date" : "2016-08-02", 
      "Tot_D" : 230, 
      "Nobot":540 
     },{ 
      "J_Id":'A' 
      "M_Date" : "2016-08-03", 
      "Tot_D" : 240, 
      "Nobot":160 
     },{ 
     "J_Id":'A' 
      "M_Date" : "2016-09-01", 
      "Tot_D" : 750, 
      "Nobot":250 
     },{ 
     "J_Id":'B' 
      "M_Date" : "2016-09-02", 
      "Tot_D" : 250, 
      "Nobot":150 
     },{ 
     "J_Id":'C' 
      "M_Date" : "2016-08-22", 
      "Tot_D" : 250, 
      "Nobot":150 
     },{ 
     "J_Id":'C' 
      "M_Date" : "2016-07-01", 
      "Tot_D" : 250, 
      "Nobot":150 
     },{ 
     "J_Id":'B' 
      "M_Date" : "2016-10-01", 
      "Tot_D" : 250, 
      "Nobot":150 
     } 
    ] 
}); 
app.filter("filtered", function($filter) { 
    return function(items, from, to) { 
    return $filter('filter')(items, "M_Date", function(v) { 
     var date = moment(v); 
     return date >= moment(from) && date <= moment(to); 
    }); 
    }; 
    }); 


</script> 

ich den Code für Datumsfilter und Summation geschrieben hatte, aber ich bin wenig Verwirrung in ng-repeat.Please vorschlagen me.Thanks im Voraus.

Answer 1

Der Fall ist falsch auf NoBot, sollte es übereinstimmen, was im Skript Nobot ist. Wenn Sie versuchen, Inline-Filter in der ng-Wiederholung zu verwenden, müssen Sie auch die Daten filtern, die Sie mit sumOfValue filtern. Ich würde vorschlagen, dem Filter eine Schaltfläche hinzuzufügen und eine Funktion aufzurufen, die im Controller gefiltert wird, und dann kann sumOfValue das neu gefilterte Array verwenden.

<button class="btn" ng-click="filterData()">filter</button> 

und die Funktion

$scope.filterData = function() { 
$scope.filteredResult = angular.copy($scope.result); 
$scope.filteredResult = $filter('filter')($scope.filteredResult, $scope.search); 
$scope.filteredResult = $filter('filtered')($scope.filteredResult, $scope.startDate, $scope.endDate); 
}; 

hier ist ein Link zu einem Arbeitsbeispiel. http://codepen.io/mkl/pen/gMaqzE

Die Daten sind in der Steuerung fest codiert, so dass ich immer die Filterfunktion mit den Steuerungslasten aufrufen, um zunächst nach den Daten zu filtern.