Angular ng-repeat data binding function performance

Question

I am viewing a lot of data. Each object has a startTime property and a duration that is unique to each object.

I need to do calculations in this startTime and duration for each object in the array and set the width of the elements based on 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>

and my js

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

I simplified my code, for example, the goal, and I missed more calculations. All in all, this works great for less than 30 objects, but performance is not enough as data grows.

Is there a better way to do this in Angular?

Answer 1

I see 2 options:

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