mardi 3 avril 2018

Angular checkbox with ng-change very slow to render

I'm using Angular 1.5.8 and have a ng-repeat as:

<div class="row table-row float" ng-repeat="float in floats | orderBy: ['Name', 'Location.Name'] track by float.Id" style="">

I've added a checkbox as per:

<input type="checkbox" class="checkbox" ng-change="toggleFloat(float.Id)" ng-model="float.Selected"/>

In my controller I have:

$scope.toggleFloat = function (Id) {
//      var float = _.find($scope.floats,
//          function(f) {
//              return f.Id === Id
//          });
//
//      float.Selected = !float.Selected;
    console.log("float: ", Id)
//      $scope.selectMe2($scope.floats[index])
//      $scope.selectMe()
}

Note that the un-commented logic currently is just a simple console.log. It seems that when $scope.floats is greater than say 20 or 30... Angular is doing strange- or things unbeknown to me.

I've profiled it but chrome profiler doesn't delve into the details very easily, please see the attached pics. I would think that regardless of the number of $scope.floats, if all it's doing is a console log, it shouldn't be taking 1.6s for to check the box.

Note that the console log prints out almost immediately but the checkbox itself takes a very long time to be actually ticked.chrome profiler




Aucun commentaire:

Enregistrer un commentaire