質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    20429questions

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

  • AngularJS

    600questions

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

Angular js 表示 一部合計

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,070

snakeriver

score 56

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
       },

   };
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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>

結果
![イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/09 17:29 編集

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

    キャンセル

  • 2016/09/09 17:42 編集

    (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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20429questions

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

  • AngularJS

    600questions

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