angular ng-repeat data binding function performance

Question

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

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>

and my js

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

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?

Will startTime and duration change once the width has been calculated once? If not you could use one time bindings or simply precalculate it. — tasseKATT
– tasseKATT, Commented Nov 18, 2015 at 4:59
Yes they can change but only on page refresh with a new object returned. I will give this a try — Garuuk
– Garuuk, Commented Nov 18, 2015 at 17:01

FDIM · Accepted Answer · 2015-11-18 20:04:14Z

2

I see 2 options:

pre-compute styles values when data is loaded and set it via ng-style
create another 'item' directive that would calculate and apply styles initially and setup watchers if needed

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>

and directive itself:

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

edited Nov 18, 2015 at 20:04

answered Nov 18, 2015 at 10:32

FDIM

1,98720 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Garuuk Over a year ago

For option 2, when you say item directive, do you mean create another directive that goes on the div style. If so, could adding the style changes to the compile phase/ pre-linking phase be the best approach?

FDIM Over a year ago

@Garuuk I've added an example

Collectives™ on Stack Overflow

angular ng-repeat data binding function performance

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related