FotisK FotisK - 1 year ago 57
AngularJS Question

Ng-repeat with ng-hide OR do the job in the controller for improved performance?

The question is simple but for sure i believe it provides added value to an application development.

In terms of performance is it better to use:

ng-repeat="r in roads", ng-hide="r.distance > 1000"

OR is it better to push items in an array in the controller, like this:

for (var i in $scope.roads) {
var road = $scope.roads[i];
if (road.distance <= 1000) $scope.roadsToShow.push(road);

and then use, just the ng-repeat like so?

ng-repeat="r in roadsToShow"

Which is considered best practice in terms of better performance? Imagine that the objects in the arrays are more than 1000.

Answer Source

Filtering the array will be significantly better for several reasons.

The most important one is that ng-hide requires an internal watch be created and watches are expensive and can cause performance bottlenecks

Secondly there will be less dom nodes to render

There are numerous ways to do the filtering in angular also.

Do not use ng-hide, ng-show ng-if etc as filtering tools in ng-repeat