質問編集履歴

1 Going

snakeriver

snakeriver score 64

2016/09/09 13:42  投稿

Angular js 表示 一部合計
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 

  
 
2016-09-01   | ID2  |  3  |  A  
2016-09-01  | ID2  |  4  |   
B
total: 7 hours 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
      },
  };
```
  • JavaScript

    38109 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • AngularJS

    648 questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る