我刚开始使用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();
});
}
对小时进行汇总的变量,如"$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方法。