Angular Ng-repeatを改善してページをフリーズする方法を教えてください。

Question

出席登録アプリケーションを表示するには、角度を使用しています。私はチームでテーブルをレンダリングする必要がありました。出席データとともにユーザーも関連付けられていました。 次のコードを使用してテーブルをレンダリングするのにng-repeatを使用しましたが、フィルタを適用しようとしたとき、または通常ロードしようとしたときにテーブルがフリーズしました。助けてください。

Laravelブレードビュー

<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%">@{{ team.name }}</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)">@{{ weekDay | amDateFormat: 'ddd' }}</th> 
        </tr> 
        <tr> 
         <th class="text-center info">Date/Engineer</th> 
         <th class="text-center active" ng-repeat="weekDay in weekDays track by $index">@{{ weekDay | amDateFormat: 'DD-MM-YYYY' }}</th> 
        </tr> 
        <tr ng-repeat="user in team.users"> 
         <th class="text-center active">@{{ user.name }}</th> 
         <td 
          ng-repeat="day in getNumberOfDays(weekDays.length) track by $index" 
          ng-bind="getAttendanceByDate(weekDays[$index],user.id)" 
          id="attData" 
         ></td> 
        </tr> 
       </table> 

角度コントローラ

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

}

Answer 1

たぶん、あなたは、高速の繰り返しプラグインを試すことができます。 https://github.com/gradecam/angular-fast-repeat。また、1回限りのバインドを試すこともできます。https://toddmotto.com/angular-one-time-binding-syntax/

Answer 2

filtersとng-repeatを使用しないでください。
フィルタを使用したNg-repeatは、このドキュメントで説明したページパフォーマンスに影響します。

コントローラまたはサービス自体でデータをフィルタリングし、すでにフィルタリングされたデータでng-repeatを実行してみます。

{{ }}の代わりにng-bindを使用してください。例えば

：

app.controller("controllerName", function(){ 
    $scope.allData = [1,2,3,4]; 
    $scope.filteredData = []; 

    $scope.filterData(){ 
     var data = []; 
     data = _.filter($scope.allData, function(a){ 
      if(a > 3){ 
       return a; 
      }  
     }); 

     $scope.filteredData = data; 
    } 

    $scope.filterData(); 
}); 


<div ng-repeat = "item in filteredData" > 
    <span ng-bind="item"></span> 
</div> 

ふてくされこのアプローチはあなたの問題を解決します。