samedi 15 octobre 2016

How to improve my Angular Ng-repeat and stop freezing the page?

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