How to hide rows in ng-grid

问题:

Background: I've been working on converting few pages in our applications to use AngularJS as an attempt for major architecture overhaul. So far Angular had proven to be friendly to me while its learning curve is pretty sharp, but that's okay.

In one of our main page, we have slickgrid and I had decided to use ng-grid instead of slickgrid to save myself from headache in my first pass. Due to the nature of our app, the same data will be filtered/un-filtered many times throughout the page lifecycle. The whole dataset will always remain exactly the same and there is only 20-40 data points so far.

Functionality it's working okay by re-assign data for gridOptins.data. However, there is serious performance hit as memory went up from ~20MB to ~64MB only within a few filter cycle. And it's getting slow (>40ms) for the grid to complete re-render. Timeline profiler reveals massive amount of DOM is being created every time grid data is changed.

I had convinced myself that it's impractical to frequently remove/insert data points from ng-grid and I'm looking for some workaround on this issue. One being just hide the data point but I'm yet to see examples that illustrate this.

Other sugestions are welcome, too.

edit: Here's the plunkr:

http://plnkr.co/edit/dgA2HW

Try clicking filter frequently and watch the total memory build itself up.

回答1:

You could use filterText from the grid...

$scope.randomfilter = function() {

  $scope.gridOptions.$gridScope.filterText = Math.ceil(24 * Math.random());
};

$scope.resetfilter = function() {
  $scope.gridOptions.$gridScope.filterText = "";
};

http://plnkr.co/edit/DmgIS9?p=preview