CODEWITHSUNDEEP
javascriptangularjsperformanceangularjs-ng-repeat
FotisK
FotisK

Reputation: 157

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.

Upvotes: 0

Views: 35

Answers (2)

charlietfl
charlietfl

Reputation: 171689

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

Upvotes: 1

Gabriele Ciech
Gabriele Ciech

Reputation: 7975

It is better to filter the items of the array in the controller or better on the server instead of hiding them after having rendered them. If you filter the array before displaying it the browser don't need to render the DOM associated to the item and then spending time to hiding it. Keep in mind that using ng-hide applies the CSS class display: none to the element, so the node exists but is not visible.

Upvotes: 1

Related Questions