Ich versuche, insgesamt für jede Abteilung ohne doppelte (Dieser Teil funktioniert) Summe und zeigen Sie alle Ergebnisse je nach dem gewählten Datum.Zeigt die Gesamtsumme in Abhängigkeit vom Datum

Ich möchte Datum von MD-Datepicker wählen und zeigen dann nur Gesamt-Task-Zeit, wo Datum = Datum ausgewählt.

Es ist HTML-Teil:

<body ng-app="ngrepeatSelect"> 
    <div ng-controller="ExampleController"> 
     <form name="myForm"> 
      <md-datepicker ng-model="myDate" md-placeholder="Enter date" ng-change="sum(myDate)"></md-datepicker> 
      {{myDate}} 
      <tt>model = {{data.model}}</tt> 
      <br/> 
      <hr/> 
     </form> 
     <md-table-container> 
      <table md-table> 
       <thead md-head> 
        <tr md-row> 
         <th md-column>Dept</th> 
         <th md-column>Total time</th> 
         <th md-column></th> 
        </tr> 
       </thead> 
       <tbody md-body> 
        <tr ng-if="!data.model" md-row md-select="test" md-on-select="" md-auto-select ng-repeat="test in tests"> 
         <td md-cell>{{ test.dept }}</td> 
         <td md-cell>{{ test.total }}</td> 
         <td md-cell></td> 
        </tr> 

        <tr ng-if="data.model" md-row md-select="test" md-on-select="" md-auto-select ng-repeat="(key,val) in data.model"> 
         <td md-cell>{{ key }}</td> 
         <td md-cell>{{ val }}</td> 
         <td md-cell></td> 
        </tr> 
       </tbody> 
      </table> 
     </md-table-container> 
    </div> 
</body>

und JS

angular.module('ngrepeatSelect', ['ngMaterial']) 
    .controller('ExampleController', function($scope, $filter) { 
     $scope.myDate = ''; 

     $scope.$watch('myDate', function(newVal, oldVal) { 
      if (!newVal) { 
       return false; 
      } 
      var date = $filter('date')(new Date(newVal), "yyyy-MM-dd"); 
     }); 

     var data = [{ 
      id: "1", 
      user: "John Doe", 
      dept: "test", 
      date: "2017-03-02", 
      task_time: "83" 
     }, { 
      id: "2", 
      user: "Mark Doe", 
      dept: "test", 
      date: "2017-02-02", 
      task_time: "41" 
     }, { 
      id: "3", 
      user: "Zac Doe", 
      dept: "other", 
      date: "2017-02-04", 
      task_time: "12" 
     }, { 
      id: "4", 
      user: "Zac Doe", 
      dept: "test", 
      date: "2017-03-02", 
      task_time: "41" 
     }, { 
      id: "5", 
      user: "Zac Doe", 
      dept: "test", 
      date: "2017-03-02", 
      task_time: "41" 
     },{ 
      id: "6", 
      user: "Zac Doe", 
      dept: "test2", 
      date: "2017-03-02", 
      task_time: "41" 
     },{ 
      id: "7", 
      user: "John Doe", 
      dept: "test", 
      date: "2017-01-02", 
      task_time: "41" 
     },{ 
      id: "8", 
      user: "Zac Doe", 
      dept: "test", 
      date: "2017-01-01", 
      task_time: "41" 
     },{ 
      id: "9", 
      user: "John Doe", 
      dept: "tests", 
      date: "2017-02-12", 
      task_time: "41" 
     }, { 
      id: "10", 
      user: "Zac Doe", 
      dept: "test2", 
      date: "2017-02-13", 
      task_time: "53" 
     }]; 

     var totalPerDept = []; 

     angular.forEach(data, function(item) { 
      var index = findWithAttr(totalPerDept, 'dept', item.dept); 

      if (index < 0) { 
       totalPerDept.push({ 
        dept: item.dept, 
        total: parseFloat(item.task_time) 
       }); 
      } else { 
       totalPerDept[index].total += parseFloat(item.task_time); 
      } 
     }); 
     $scope.tests = totalPerDept; 

     function findWithAttr(array, attr, value) { 
      for (var i = 0; i < array.length; i += 1) { 
       if (array[i][attr] === value) { 
        return i; 
       } 
      } 
      return -1; 
     } 


     $scope.sum = function(date) { 
      let model = data.filter(function(item) { 
       return (item.date == TheSameDate(item)) 
      }); 

      let tests = {}; 
      model.forEach(function(item) { 
       if (!tests.hasOwnProperty(item.dept)) { 
        tests[item.dept] = 0; 
       } 

       tests[item.dept] += parseFloat(item.task_time); 

      }); 

      $scope.data.model = tests; 
     } 

     function TheSameDate(item){ 
      if($scope.myDate){ 
      let myDate = new Date($scope.myDate); 
      let itemDate = new Date(item.date); 

      if(myDate.getFullYear() != itemDate.getFullYear() || myDate.getMonth() != itemDate.getMonth()){ 
       return false; 
      } 
      } 

      return true 
     } 


     $scope.data = { 
       current: null, 
      model: null, 
      availableOptions: [{ 
        id: '1', 
        name: 'John Doe' 
       }, 
       { 
        id: '2', 
        name: 'Mark Doe' 
       }, 
       { 
        id: '3', 
        name: 'Zac Doe' 
       } 
      ] 
     }; 


    });

I jsFiddle erstellt habe zu zeigen, was ich zu tun versuchen.

Quelle

2017-03-17 Nelson Biggety

Es gibt ein Problem zu überprüfen. Überprüfen Sie meine [Antwort] (http://stackoverflow.com/a/42853082/3543808) –

Ich habe Ihren Code überarbeitet und den Vergleich der Daten geändert.

Ich habe unten Schnipsel verwendet, um die Gleichheit von zwei Daten im Filter selbst mit Datum Vergleich

let model = data.filter(function(item) { 
    let iDate = new Date(item.date); 
    return (
     iDate.getFullYear() === sDate.getFullYear() && 
     iDate.getMonth() === sDate.getMonth() && 
     iDate.getDate() === sDate.getDate() 
    ); 
});

Demo

fiddle

Quelle

2017-03-17 08:56:36

Vielen Dank. Ich habe nur diese Zeile gelöscht iDate.getDate() === sDate.getDate(), weil ich alle zB aus März oder Januar ohne Tage zeigen möchte. –

Ich habe noch eine Frage. Ist es möglich, alle Summen anzuzeigen, wo Datum = aktuelles Datum, ohne etwas zu wählen. Zeige immer total für currentDate –

@NelsonBiggety. Ja, du kannst es tun. Sie durchlaufen direkt das Array im Controller, statt dessen können Sie eine Funktion verwenden und das erforderliche Datum übergeben, so dass die Gesamtsumme für das angegebene Datum angezeigt wird –

Zeigt die Gesamtsumme in Abhängigkeit vom Datum

Antwort

Demo

Verwandte Themen