angular ng-repeat数据绑定函数性能

Question

我正在遍历大量数据。每个对象都有一个属性开始时间和持续时间，这对每个对象都是唯一的。

我需要计算数组中每个对象的开始时间和持续时间，并根据这些计算设置元素宽度。

<div ng-repeat = "event in events track by event.id">
    <div style="width:{{calculateWidth(event.startTime, event.duration)}}%">
       <div>more content</div>
    </div>
<div>

和我的 js

$scope.calculateWidth = function(duration, starTime){
    var secondsInDay = 86400;
    var width = (duration / secondsInDay)*100;
    return width;
}

出于示例目的，我简化了代码，并省略了更多计算。总的来说，这适用于少于 30 个对象，但随着数据的增长，性能会下降。

在 Angular 中有更好的方法吗？

Answer 1

我看到 2 个选项：

加载数据时预先计算样式值并通过 ng-style 进行设置
创建另一个 'item' 指令，该指令最初会计算和应用样式并在需要时设置观察器

我会选择第 2 个，涉及最少的表达式。

编辑：像这样：

<div ng-repeat = "event in events track by event.id">
    <div my-event="event">
       <div>more content</div>
    </div>
<div>

和指令本身：

module.directive('myEvent', function() {
  return {
    scope:{
      event:"=myEvent"
    },
    link:link
  }

  function link (scope,element, attrs){
    var event = scope.event; 
    element.style.width = calcWidth(event.startTime, event.duration)+'px';
  }

  function calcWidth(duration, starTime){
    var secondsInDay = 86400;
    var width = (duration / secondsInDay)*100;
    return width;
 }
});

angular ng-repeat数据绑定函数性能

angular ng-repeat data binding function performance

data-binding

angularjs

ng-repeat