Angular js 表示 一部合計

Question

Spring framework(boot)
にてviewをJavaScript, html はangular jsをしようしています。

以下のような社員作業時間数を表示ページがあります。
idとdateが同じ列のhours の合計、totalを表示させたいのですが、
どうすればいいでしょうか。
html でng-repeat で表示しているので、
合計時間数hours をどう記述し、表示させればいいのかわかりません。
よろしくおねがいします。

date      | id   | hours | Work
2016-09-01  | ID1  |  1 | A
2016-09-01  | ID1  |  2 | B


total: 3 hours 


P

2016-09-01  | ID2  |  3 | A


2016-09-01  | ID2  |  4 | B


total: 7 hours

2016-09-02  | ID1  |  5 | C


total: 5 hours

2016-09-02  | ID2  |  6 | D


total: 6 hours

JavaScript の表示のための処理は以下のようになっています。

if(report[staffData.id] == null){
      report[staffData.id]= [];
}
if(report[staffData.id][attendance.date] == null){
      report[staffData.id][attendance.date] = [];
      $scope.report[staffData.id][attendance.date].push({
           hours: report.hours,
           work: report.work
       }); 
}else if(report[staffData.id][attendance.date].length != 0){
        report[staffData.id][attendance.date].length+1;
        $scope.report[staffData.id][attendance.date].push({
           hours: report.hours,
           work: report.work
       });
}

htmlは以下のようになっています。

<tr> 
<th>日付</th>
<th>ID</th>
<th>作業時間数</th>
<th>作業内容</th>
</tr>
<tr ng-repeat="report in report[staffData.id][attendance.date]">
<td>{{report.date}}</td>
<td>{{report.id}}</td>
<td>{{report.hours}}</td>
<td>{{report.work}}</td>
</tr>

データはデバックで見て見ますと、いかのような連想配列になっています。

   var data ={

       data1:{
           date:"2016-09-01",
           id: "ID1",
           hours:"1", 
           work: A
       },
       data2:{
           date:"2016-09-01",
           id: "ID1",
           hours:"2", 
    work: B
       },
       data3:{
           date:"2016-09-01",
           id: "ID2",
           hours:"3", 
           work: A
       },
       data4:{
           date:"2016-09-01",
           id: "ID2",
           hours:"4", 
           work: B
       },
       data5:{
           date:"2016-09-02",
           id: "ID1",
           hours:"5", 
           work: C
       },
       data6:{
           date:"2016-09-02",
           id: "ID2",
           hours:"6", 
           works: D
       },

   };

Answer 1

data6だけworksだったのでworkに変更

$scope.data = {
        data1: {date: "2016-09-01", id: "ID1", hours: "1", work: "A"},
        data2: {date: "2016-09-01", id: "ID1", hours: "2", work: "B"},
        data3: {date: "2016-09-01", id: "ID2", hours: "3", work: "A"},
        data4: {date: "2016-09-01", id: "ID2", hours: "4", work: "B"},
        data5: {date: "2016-09-02", id: "ID1", hours: "5", work: "C"},
        data6: {date: "2016-09-02", id: "ID2", hours: "6", work: "D"}
      };

      $scope.ret = [];
      (() => {
        var ret = [];
        var hoursTotal = 0;
        var beforKey = {date: '', id: ''};
        var isSame = (befor, current) => befor.date === '' ? true : befor.date === current.date && befor.id === current.id;

        for (elem in $scope.data) {
          var tmp = $scope.data[elem];

          if (isSame(beforKey, tmp)) {
            hoursTotal += parseInt(tmp.hours);
          } else {
            ret.push({date: 'total', id: '', hours: hoursTotal, work: ''});
            hoursTotal = parseInt(tmp.hours);
          }
          ret.push({date: tmp.date, id: tmp.id, hours: tmp.hours, work: tmp.work});
          beforKey = {date: tmp.date, id: tmp.id};
        }
        ret.push({date: 'total', id: '', hours: hoursTotal, work: ''});
        $scope.ret = ret;
      })();

<div ng-repeat="report in ret">
  <span ng-bind="report.date"></span>
  <span>|</span>
  <span ng-bind="report.id"></span>
  <span>|</span>
  <span ng-bind="report.hours"></span>
  <span>|</span>
  <span ng-bind="report.work"></span>
</div>

結果
![

Comments

[snakeriver]

(() => {})(); はどういったものでしょう。なんていう記述ですか。
後、var isSame = (befor, current) => befor.date === '' ? true : befor.date === current.date && befor.id === current.id;
とif文の中のisSameは関連してますか。

[pinpikokun]

(function(){})()　と同じ意味です。

functionを()で囲んで最後に()を付けるのは即時関数といい、読み込まれた後に即時実行されます。簡略化するために即時関数にしているだけで「$scope.ret = function(){}」としてhtmlが読み込まれるタイミングで「<div ng-repeat="report in ret()">」を呼んでも同じです。

=>の記号はアロー関数といいます、簡単に言うとfunctionを省略して書いているだけなのでfunctionにしても処理に影響はありません。

http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e
http://qiita.com/takeharu/items/c23998d22903e6d3c1d9