AngularJS, ng-repeat, checkboxes and toggleAll

Question

AngularJS, ng-repeat, checkboxes and toggleAll

1.1k Views Asked by gregor At 03 April 2025 at 18:21

There's no question. Searching over the internet, you can easily find examples with how ng-repeat and checkboxes work. All these examples include only few checkboxes. But, have you tried to create several hundred checkboxes, then use some toggle button to check/uncheck all checkboxes? The app becomes totally unresponsive. In browser it is kind of okay, but testing the app on device (iPad4, iPad mini etc), the app gets totally unresponsive.

I've created a Plunker example here: http://plnkr.co/edit/wfa3TIp3BYaPvzX8ehAf?p=preview

Try to test toggle checkbox with at least 500 entries so you could see the delay. The question now is, is there any way to improve the performance? Checking recording of Timeline, this is the result I'm getting for 500 entries (:

19.131 ms Scripting
150.104 ms Rendering
55.543 ms Painting
138.402 ms Other
2.95 s Idle

As you can see, rendering takes the precious time and we cannot afford that kind of time to be lost.

HTML:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <link href="index.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
<ion-view view-title="main module">
  <ion-content ng-controller="StartCtrl">
    <div class="list">
      <div class="item item-divider">
        Options
      </div>

      <a class="item item-icon-left" href="#" ng-click="generateEntries()">
        <i class="icon ion-plus-circled"></i>
        Add more entries
      </a>

      <a class="item item-icon-left" href="#" ng-click="clearEntries()">
        <i class="icon ion-trash-b"></i>
        Clear entries
      </a>
      <div class="item item-icon-left" href="#">
        <i class="icon ion-person-stalker"></i>
        Entries in array
        <span class="badge badge-assertive">{{entries.length}}</span>
      </div>
      <li class="item item-checkbox">
        <label class="checkbox">
          <input type="checkbox" ng-model="checkedAll" ng-click="toggleAll()">
        </label>
        Toggle all
      </li>
      <div class="item item-divider">
        Entries
      </div>
      <li class="item item-checkbox" ng-repeat="entry in entries track by $index">
        <label class="checkbox">
          <input type="checkbox" ng-model="entry.checked" name="entry.id">
        </label>
        {{entry.id}} - {{entry.name}}
        <span class="badge badge-light">{{$index}}</span>
      </li>
    </div>
  </ion-content>
</ion-view>

  </body>

</html>

JS:

// Code goes here
var app = angular.module('myApp', []);

app.controller('StartCtrl', function ($scope) {

  // bind data from service
  // this.someData = Start.someData;
  $scope.entries = [];

  $scope.generateEntries = function () {
    var names = ['Mark', 'John', 'Maria', 'Lea', 'Marco'];
    var obj = {};
    for (var i = 0; i < 50; i++) {
      obj = {'id': Math.floor(Math.random() * 10000), 'name': names[Math.floor(Math.random() * names.length)]};
      $scope.entries.push(obj);
    }
  };

  $scope.clearEntries = function () {
    $scope.entries = [];
  };

  $scope.toggleAll = function () {
    for (var i = 0; i < $scope.entries.length; i++) {
      $scope.entries[i].checked = $scope.checkedAll;
    }
  };
});

Thanks to everyone that will participate in this discussion.

Original Q&A

There are 2 best solutions below

gregor On 13 June 2015 at 18:46

Both replies, from @Numyx and @jaycp were very helpful. I've made a few improvements to the code: 1. I'm using track by entry.id instead of track by $index which speeded up the rendering as @Numyx said, 2. I've used ion-infinite-scroll so I don't load all results (5000 for example) at once, but only approx. 25. Scrolling to bottom loads more. 3. I'm using 2 datasets. 1 for ALL entries and 1 for view entries. View Entries array is filled when we scroll. The more we scroll, the more entries from ALL array are added to view array, 4. I'm using $timeout to show $ionicLoading and hiding $ionicLoading when rendering is finished,

So, when using toggle button, now we aren't making all entries as checked but only those, which are in visible array.

Here is the updated code:

start.html

<ion-view view-title="main module">
  <ion-content>
    <div class="list">
      <div class="item item-divider">
        Options
      </div>

      <a class="item item-icon-left" href="#" ng-click="start.generateEntries()">
        <i class="icon ion-plus-circled"></i>
        Add more entries
      </a>

      <a class="item item-icon-left" href="#" ng-click="start.clearEntries()">
        <i class="icon ion-trash-b"></i>
        Clear entries
      </a>
      <div class="item item-icon-left" href="#">
        <i class="icon ion-person-stalker"></i>
        Entries in array
        <span class="badge badge-assertive">{{start.entries.length}}</span>
      </div>
      <li class="item item-checkbox">
        <label class="checkbox">
          <input type="checkbox" ng-model="start.checkedAll" ng-click="start.toggleAll()">
        </label>
        Toggle all
      </li>
      <div class="item item-divider">
        Entries {{start.entriesView.length}}
      </div>
      <li class="item item-checkbox" ng-repeat="entry in start.entriesView track by entry.id">
        <label class="checkbox">
          <input type="checkbox" ng-model="entry.checked" name="entry.id">
        </label>
        {{entry.id}} - {{entry.name}}
        <span class="badge badge-light">{{$index}}</span>
      </li>
      <ion-infinite-scroll
      on-infinite="start.loadMore()"
      ng-if="start.canLoadMore()"
      immediate-check="false"
      distance="1%">
      </ion-infinite-scroll>
    </div>
  </ion-content>
</ion-view>

start-ctrl.js

'use strict';
angular.module('main')
.controller('StartCtrl', function (Utility, $timeout, $scope) {

  // bind data from service
  // this.someData = Start.someData;
  this.entries = [];
  this.entriesView = [];
  this.numEntriesToCreate = 5000;
  this.numEntriesToAdd = 25;
  var self = this;

  $scope.$on('$stateChangeSuccess', function () {
    console.log('START');
    self.loadMore();
  });

  /**
   * generate more entries
   */
  this.generateEntries = function () {
    var names = ['Gregor', 'Mathias', 'Roland', 'Jonas', 'Marco'];
    var obj = {};

    for (var i = 0; i < self.numEntriesToCreate; i++) {
      obj = {'id': Math.random() + Math.random() * 10000, 'name': names[Math.floor(Math.random() * names.length)]};
      self.entries.push(obj);
    }
  };

  this.clearEntries = function () {
    self.entries = [];
  };

  this.toggleAll = function () {
    self.startLoading();

    console.log(self.checkedAll);

    // we wait for spinner to appear (500ms), then start..
    $timeout(function () {
      for (var i = 0; i < self.entriesView.length; i++) {
        self.entriesView[i].checked = self.checkedAll;
      }

      self.finishedLoading();

    }, 500);
  };

  this.loadMore = function () {
    if (self.canLoadMore()) {
      // self.startLoading();
      $timeout(function () {
        self.entriesView = self.entriesView.concat(
          self.entries.slice(self.entriesView.length, self.entriesView.length + self.numEntriesToAdd) // exact items from our original entries
        );

        $scope.$broadcast('scroll.infiniteScrollComplete');
        // self.finishedLoading();
      }, 500);
    }
    //
  };

  this.canLoadMore = function () {
    return (self.entriesView < self.entries) ? true : false;
  };

  this.startLoading = function () {
    Utility.startTimer();
    Utility.showLoading();
  };

  this.finishedLoading = function () {
    $timeout(function () {
      Utility.hideLoading();
      console.log('execution took ' + Utility.endTimer() + 'ms.');
    });
  };

  console.log('init. creating ' + self.numEntriesToCreate + ' entries');
  self.generateEntries();

});

utility-serv.js

'use strict';
angular.module('main')
.service('Utility', function ($ionicLoading) {
  this.opt = {
    startTime: null
  };
  this.showLoading = function () {
    $ionicLoading.show({template: '<ion-spinner></ion-spinner>'});
  };
  this.hideLoading = function () {
    $ionicLoading.hide();
  };
  this.startTimer = function () {
    this.opt.startTime = new Date().getTime();
  };
  this.endTimer = function () {
    return ((this.opt.startTime) ? new Date().getTime() - this.opt.startTime : null);
  };
});

I've also published the full example on GitHub. Project was generated using generator-m. You can simply clone the github and run it using gulp watch command.

**Numyx** · Accepted Answer

Use entry in entries track by entry.id instead of $index. Having 500 entries this improved the stats alot for me:

Using track by $index

65.660 ms Scripting
246.985 ms Rendering
129.748 ms Painting
1.23 s Other
3.31 s Idle

Using track by entry.id

46.534 ms Scripting
30.827 ms Rendering
17.631 ms Painting
226.515 ms Other
3.18 s Idle

AngularJS, ng-repeat, checkboxes and toggleAll

There are 2 best solutions below

Related Questions in ANGULARJS

Related Questions in CHECKBOX

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in TOGGLE

Related Questions in IONIC-FRAMEWORK

Trending Questions

Popular # Hahtags

Popular Questions