Angular js spring启动并添加一个关联数组的值

我刚开始使用angularjs, javascript和Spring boot。请帮我一下。

我正在尝试在考勤页面中显示工作报告行。当您在某个日期单击某个工作人员的一行时，它将显示工作报告行，其中显示有关工作人员在某一天所做的报告。

我试图添加总工作报告小时数，但我不能添加它们并在浏览器上显示。

这就是网页的样子(There are FROM &到日历选择考勤数据)。

Attendance Page
-----------------
FROM   TO 
Date        |   Staff  |  Clock In   |  Clock Out  | Working Hours 
---------------------------------------------------------------
2016-09-01  |   Gwen   |    9:00     |    17:00    |  8
2016-09-01  |   Tom    |    9:00     |    18:00    |  8
2016-09-01  |   Mike   |    9:00     |    17:00    |  7
2016-09-02  |   Gwen   |    9:00     |    17:00    |  7
2016-09-02  |   Tom    |    9:00     |    18:00    |  8
2016-09-02  |   Mike   |    9:00     |    17:00    |  7

当您单击上面的一行时，它看起来像这样。

Date        |   Staff  |  Clock In   |  Clock Out  | Working Hours 
---------------------------------------------------------------
2016-09-01  |   Gwen   |    9:00     |    17:00    |  8
--------------------------------------------------------------
Title       |  Customer | Project |   Progress Rate | Hours
--------------------------------------------------------------
Sales       |    MAC    | iwatch2 |   50            | 5
HM          |  our firm |    SE   |   70            | 2
Consultant  |  our firm |    SE   |   70            | 1

我想增加小时数。总工作时间8

这是html文件，我卡住了如何显示每个考勤数据的工作报告的总工作时间，如下所示。

---------------------------
total work hours  | 8

这是HTML的一部分。

<table st-table="attendanceList" st-safe-src="attendanceList" class="table">
<thead>
<tr class="header">
<th st-sort="date">DATE</th>
<th st-sort="staffData.name">STAFF</th>
<th st-sort="clockIn">IN</th>
<th st-sort="clockOut">OUT</th>
<th st-sort="workinghours">WORKHOURS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="attendance in attendanceList"  class="selectable"
      ng-click="showDetail(attendance.id)" ng-class="attendance.id == selectedAttendanceId ? 'selected' : ''">
<td>{{attendance.date | date: "yyyy-MM-dd"}}</td>
<td>{{attendance.staffData.name}}</td>
<td>{{attendance.clockIn | date: "HH:mm:ss"}}</td>
<td>{{attendance.clockOut | date: "HH:mm:ss"}}</td>
<td>{{attendance.workinghours | date: "HH:mm:ss"}}</td>
</tr>
<tr ng-repeat-end ng-show="attendance.id == selectedAttendanceId">
<td colspan="11">
<h5>WORKREPORT</h5>
<table class="table">
<thead>
<tr>
<th>TITLE</th>
<th>CUSTOMER</th>
<th>PROJECT</th>
<th>PROGRESS RATE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="workreport in workreportMap[attendance.staffDto.id][attendance.date]">
<td>{{workreport.title}}</td>
<td>{{workreport.customer}}</td>
<td>{{workreport.project}}</td>
<td>{{workreport.progress}}</td>
</tr>
<tr>
<td>TOTAL HOURS</td> <td>{{hours}}</td>
</tr>            
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

这是控制器。我一直在加。

app.controller("attendanceCtl ') -----

workbenchApp.controller('attendanceCtrl', ['$scope', '$modal', 'MessagesService', 'attendanceFactory','staffFactory', '・・・otherFatories',
    function($scope, $modal, MessagesService, attendanceFactory, staffFactory, otherFactories) {
    $scope.from = new Date($scope.today.getFullYear(), $scope.today.getMonth()-1, $scope.today.getDate());
    $scope.to = new Date($scope.today.getFullYear(), $scope.today.getMonth(), $scope.today.getDate(), 23, 59, 59);
    $scope.isLoading = true;
    $scope.borderDate = editLockFactory.getBorderDate($scope.today);

    getAttendance();
    function getAttendance() {
        $scope.isLoading = true;
        usSpinnerService.spin('attendanceSpinner');
        attendanceFactory.getfromto($scope.from, $scope.to)
        .success(function(attendanceList) {
            $scope.attendanceList = attendanceList;
            $scope.displayedAttendanceList = angular.copy($scope.attendanceList);
            workreportFactory.get($scope.from, $scope.to)
            .success(function(workreportList) {
                $scope.workreportList = workreportList;
                $scope.workreportMap = {};
                for (var i = 0; i < workreportList.length; i++) {
                    var report = workreportList[i];
                    var keydate = report.date;
                    var totalWorktime = 0;
                    if ($scope.workreportMap[report.staffData.id] == null) {
                        $scope.workreportMap[report.staffData.id] = [];
                    }
                    if (($scope.workreportMap[report.staffData.id][keydate] == null) ) {
                        $scope.workreportMap[report.staffData.id][keydate] = [];
                        $scope.workreportMap[report.staffData.id][keydate].push({
                            title: report.title,
                            customer: report.customer,
                            projects: report.projects,
                            progress: report.progress,
                            hours: hours
                        });
                        totalWorktime += report.hours;

                    }else if($scope.workreportMap[report.staffData.id][keydate].length != 0 ){
                        $scope.workreportMap[report.staffData.id][keydate].length+1;
                        //second push for if there are few data(rows for workreport for a person on a day)
                        $scope.workreportMap[report.staffData.id][keydate].push({
                            title: report.title,
                            customer: report.customer,
                            projects: report.projects,
                            progress: report.progress,
                            hours: hours
                        });
                        totalWorktime += report.hours;
                    }
                }//for END
                stopSpinner();
            })
            .error(function(data, status) {
                MessagesService.messages.push({
                    type: 'danger',
                    content: 'ERROR: Status code ' + status
                });
                MessagesService.display = true;
                stopSpinner();
            });
            stopSpinner();
        })
        .error(function(data, status) {
            MessagesService.messages.push({
                type: 'danger',
                content: 'ERROR: Status code ' + status
            });
            MessagesService.display = true;
            stopSpinner();
        });
    }