I'm using angular to display my attendance register application. I needed to render a table with teams and it's associated users along with attendance data. I used ng-repeat to render the table using following code but the table freezes when I tried to apply any filters or even when I tried to load it normally. Please help.
Laravel Blade View
<div class="table-responsive" ng-show="!loading">
<table class="table table-bordered text-center" ng-repeat="team in teamsAndAttendances | filter: { 'id': teamFilter }:true track by $index">
<tr>
<th class="active text-center" colspan="100%">@</th>
</tr>
<tr>
<th class="text-center info">Day</th>
<th class="text-center" ng-repeat="weekDay in weekDays track by $index" ng-class="getDayStringClass(weekDay)">@</th>
</tr>
<tr>
<th class="text-center info">Date/Engineer</th>
<th class="text-center active" ng-repeat="weekDay in weekDays track by $index">@</th>
</tr>
<tr ng-repeat="user in team.users">
<th class="text-center active">@</th>
<td
ng-repeat="day in getNumberOfDays(weekDays.length) track by $index"
ng-bind="getAttendanceByDate(weekDays[$index],user.id)"
id="attData"
></td>
</tr>
</table>
Angular Controller
function AttendanceCtrl($scope,LeavesAndAttendancesFactory,moment,$resource) {
var vm = $scope;
vm.plClass = false;
vm.loading = false;
vm.teamsAndAttendances = [];
vm.attendanceObject = {};
LeavesAndAttendancesFactory.getTeamsUsersAttendances().query().$promise.then(function(res) {
return vm.teamsAndAttendances = res;
});
vm.getNumberOfDays = function(days) {
return new Array(days);
}
vm.getAttendanceByDate = function(dateStamp,userID) {
var fetchedDate = moment(dateStamp).format('YYYY-MM-DD');
var users = angular.forEach(vm.teamsAndAttendances, function(team) {
return team.users;
});
console.log(users);
}
vm.getAttendanceClass = function(plClass) {
if(plClass)
{
return 'danger';
} else {
return 'active';
}
}
vm.loadTeams = function() {
return $resource('../api/teams/all').query().$promise.then(function(data) {
vm.teams = data;
});
}
vm.getDayStringClass = function(dateStamp) {
var day = moment(dateStamp).format('ddd');
if(day === 'Sat' || day === 'Sun')
{
return 'light-fire';
} else {
return 'info';
}
}
var today = moment();
vm.weekDays = [];
var startOfWeek = moment().startOf('week');
var endOfWeek = moment().endOf('week');
var day = startOfWeek;
while (day <= endOfWeek) {
vm.weekDays.push(day.toDate());
day = day.clone().add(1, 'd');
}
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire