Angular ng-repeat filter compariso (v8)

Revision 8 of this benchmark created on

Description

Angular test comparing the performance impact of filters on ng-repeat

Preparation HTML

<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>

<repeat></repeat>

<script>
var myApp = angular.module("myApp", []);
</script>

Setup

myApp.controller("appCtrl", function ($scope, $timeout) {
      $scope.items = [];
       
      for (i=0;i < 1000;i++) {
        $scope.items.push("test"+i);
      }
    
      $scope.filterString1="!1";
      $scope.filterString2="!2";
    
      
    });
    
    myApp.directive('repeat', function () {
        return {
            restrict: 'EA',
            template: '{{items}}'
        };
      });

Test runner

Ready to run.

Testing in
TestOps/sec
No repeat
myApp.directive('repeat', function () {
    return {
        restrict: 'EA',
        template: '{{items}}'
    };
  });
ready
repeat
myApp.directive('repeat', function () {
    return {
        restrict: 'EA',
        template: '<div ng-repeat="item in items"> {{item}}</div>'
    };
  });
ready
1 filter
myApp.directive('repeat', function () {
    return {
        restrict: 'EA',
        template: '<div ng-repeat="item in items | filter:filterString1"> {{item}}</div>'
    };
  });
ready
2 filters
myApp.directive('repeat', function () {
    return {
        restrict: 'EA',
        template: '<div ng-repeat="item in items | filter:filterString1 | filter:filterString2"> {{item}}</div>'
    };
  });
ready
ng-if
myApp.directive('repeat', function () {
    return {
        restrict: 'EA',
        template: '<div ng-repeat="item in items" ng-if"item != filterString1"> {{item}}</div>'
    };
  });
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.