1

This is probably not the first question on this topic, but since it took me hours finding out I couldn't find a good solution, I still want to ask you guys here.

I would like to optimize following code, because the page needs a few seconds to load right now. If I take that part out of the page (it is only one part of it), the page loads in max 1 second.

FYI: I only have 4 routes for the student that I test my application with.

<tr ng-repeat="route in student.itin">
      <td>
         <select ng-options="airline._id as airline.code for airline in ::airlines | orderBy: 'code'" ng-model="route.airline" class="form-control"/>
      </td>
      <td>
         <input type="text" ng-model="route.flight_number" maxlength="4" size="4" class="form-control"/>
      </td>
      <td>
         <input type="text" ng-model="route.class" maxlength="1" size="1" class="form-control"/>
      </td>
      <td>
         <select ng-options="airport._id as airport.code for airport in ::airports | orderBy: 'code'" ng-model="route.departure.airport" class="form-control"/>
      </td>
      <td>
         <div class="form-group has-feedback" ng-class="{'has-error': route.arrival.date < route.departure.date}">
             <input type="text" class="form-control" is-open="datepickers['departure_date' + $index]" max-date="route.arrival.date" timepicker-options="timepicker_options" ng-focus="open($event, 'departure_date'+$index)" datetime-picker="{{ ::datetimepicker_format }}" ng-model="route.departure.date" />

             <span ng-if="route.arrival.date < route.departure.date" tooltip-placement="right" tooltip="Arrival Date cannot be before Departure Date" tooltip-trigger="mouseenter" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
         </div>
      </td>
      <td>
         <select ng-options="airport._id as airport.code for airport in ::airports | orderBy: 'code'" ng-model="route.arrival.airport" class="form-control"/>
      </td>
      <td>
         <div class="form-group has-feedback" ng-class="{'has-error': route.arrival.date < route.departure.date}">
             <input type="text" class="form-control" is-open="datepickers['arrival_date' + $index]" min-date="route.departure.date" timepicker-options="timepicker_options" ng-focus="open($event, 'arrival_date'+$index)" datetime-picker="{{ ::datetimepicker_format }}" ng-model="route.arrival.date" />

             <span ng-if="route.arrival.date < route.departure.date" tooltip-placement="right" tooltip="Arrival Date cannot be before Departure Date" tooltip-trigger="mouseenter" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
         </div>
      </td>
      <td>
         <input type="text" ng-model="route.filekey" class="form-control"/>
      </td>
      <td class="text-right">
         <a class="btn btn-danger" ng-click="deleteRoute($index)" tooltip-placement="top" tooltip="Delete route" tooltip-trigger="mouseenter">
              <i class="fa fa-trash-o"></i>
         </a>
      </td>
</tr>

What I have learned from my research is pretty much that I shouldn't use too much ng-repeat, try to minimize data-binding and filters. But after applying everything I have learned, I came up with the code above and don't know how to go on optimizing, since this is not enough.

Thank you

3 Answers 3

2
  • add track by to your ng-repeat
  • remove filters where it is possible
  • use one time binding with ::

Or switch to ReactJS.

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

Comments

1

Try to improve ng-repeat if your AngularJS is above 1.4.1: https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates

1 Comment

Thank you. The code above is AngularJS 1.3.15. What tracking functionality do you recommend exactly?
0

You can try to use sly-repeat directive instead ng-repeat: http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/

1 Comment

Sly-Repeat does not work for Angular 1.3.x currently. But still thank you!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.