角NG重复数据绑定功能表现 [英] angular ng-repeat data binding function performance

问题描述

我通过大量的数据循环。每个对象具有属性startTime和持续时间，这是为每个对象是唯一的。

I'm looping through lots of data. Each object has a property startTime and duration, which is unique for each object.

我需要做这样的startTime计算和持续时间的阵列中的每个对象，并设置元件宽度基于关闭这些计算

I need to do calculations on this startTime and duration for each object in the array and set the elements width based off these calculations.

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

我简化我的code例如目的，有更多的计算我省略。总体而言，这工作得很好不到30对象，但性能却没有这些数据的增长。

I simplified my code for example purpose and there are more calculations I omitted. Overall, This works fine for less than 30 objects but performance lacks as the data grows.

有没有更好的方式角做到这一点？

Is there a better way to do this in Angular?

推荐答案

我看到2个选项：

• pre-计算风格值时，数据加载，并通过NG-样式设置为


• 创建另一个'项目'指令，将计算，如果需要申请最初的样式和设置观察家

我会去数2，参与前pressions的最少。

I'd go for number 2, least amount of expressions involved.

编辑：
事情是这样的：

edit: Something like this:

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

这篇关于角NG重复数据绑定功能表现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！