angular js spring boot並添加關聯數組的值之一

Question

我剛開始使用angularjs，javascript和Spring boot。 請幫我。

我正在嘗試在出勤頁面顯示工作報告行。 當您單擊某個日期的某個職員上的一行時，它將顯示工作報告行，其中顯示有關職員在一天中所做的工作的報告。

我正在嘗試添加工作報告的總時數，但我無法添加它們並將其顯示在瀏覽器中。

網頁的外觀如下（有FROM＆TO日歷可以選擇出勤數據）。

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();
        });
    }

Answer 1

可以使用下面的代碼來匯總諸如“ $ scope.totalhours”之類的小時數的變量。 然后在ng-repeat結束時，您可以打印出該值。

$scope.totalhours = 0;
for(var i = 0; i<workreportList.length; i++){

    var workreportList = workreportList; $scope.workreportMap = {};    

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

注意：我還清理了兩個中央if語句，因為它們兩次具有相同的push方法。