CODEWITHSUNDEEP
javascriptjqueryangularjs
nsk
nsk

Reputation: 1463

Whats the approach to make use of AngularJS watchers in jQuery datatables

Our requirement is to display 1000+ rows in a single page but then we should also show/hide button in one of the columns. This button would be toggled by NG watcher on some action. We didn't have issue while displaying these many records but the performance degraded when watchers were used - for the obvious reason that watchers are directly proportional to the number of rows

  1. We don't want to paginate
  2. We would like to leverage upon AngularJS watchers and ng-models

Plz can someone suggest if there is an alternative to jQuery datatables or any hack to use watchers without compromising on the performance.

Upvotes: 0

Views: 46

Answers (1)

Gene
Gene

Reputation: 616

Without seeing the code it sounds like you are creating a $scope.$watch for each row in the table. it's not surprising you are seeing performance issues. Instead I would do something like this which responds to a ng-click to change row state Plunker Here:

View.html

<div ng-repeat="item in items">
  {{item.name}}
  <div ng-show="showHide[$index]===false">
    Showing Me for index {{$index}}
  </div>
  <button ng-click="toggle($index)">
    <span ng-show="showHide[$index]===true || showHide[$index]===undefined">Show</span>
    <span ng-show="showHide[$index]===false">Hide</span>
  </button>
</div>

Controller.js

var app = angular.module('app', []);

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

  $scope.input = [];
  $scope.editing = {};

  $scope.items = [{id: 1, name: 'One'}, {id: 2, name: 'Two'}, {id: 3, name: 'Three'}]
  $scope.showHide = {};

  $scope.toggle = function(index) {
    if ($scope.showHide[index] === undefined) {
      $scope.showHide[index] = true; // assume show is default
    }
    $scope.showHide[index] = !$scope.showHide[index];
  }

});

Upvotes: 1

Related Questions