使用ng-change的Angular复选框渲染速度非常慢

时间:2018-04-03 07:29:13

标签: javascript angularjs performance checkbox

我使用Angular 1.5.8并将ng-repeat作为:

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

我已根据以下内容添加了一个复选框:

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

在我的控制器中我有:

$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()
}

请注意,未注释的逻辑当前只是一个简单的console.log。似乎当$ scope.floats大于20或30时...... Angular正在做一些我不知道的奇怪事情。

我对它进行了描述,但是chrome Profiler并没有很容易地深入研究细节,请参阅随附的图片。我认为无论$ scope.floats的数量如何,如果它所做的只是一个控制台日志,它就不应该花1.6秒来检查该框。

请注意,控制台日志几乎立即打印出来,但复选框本身需要很长时间才能实际打勾。chrome profiler

Edit to include a float obj

0 个答案:

没有答案