Question

我的网页上有一个网格，其格式如下：

   <tr data-ng-repeat="row in grid.view  = (grid.data | filter:isProblemInRange | orderBy:option.problemOrderBy[option.sProblemOrderBy].key:option.sProblemSortDirection) track by row.problemId">

网格最多可包含500行。一旦检索到数据，用户就可以过滤使用isProblemInRange过滤器的行。用户也可以对行重新排序。可以预料，这一切都需要时间。

我能做些什么来提高效率吗？

我可以从ng-repeat中取出所有这些代码并放入在我的控制器中创建grid.view的部分吗？

请注意，isProblemInRange是动态的。当用户键入选择框时，在去抖动后，在过滤器中使用输入的数字来限制屏幕上显示的行。

还有一件事。网格中的数据仅在用户单击某行并且打开模式时才会更改。用户单击模态上的保存后，grid.data的一行将更改。有什么我可以做的事情来阻止重复观察每一行的每一个字段并让它只是在我的模态完成保存之后才响应，这是网格数据更改的唯一时间。

Answer 1

每个过滤器都可以直接从JavaScript代码调用。有关“过滤器”过滤器用法的示例，请参阅http://docs.angularjs.org/api/ng.filter:filter。

因此，每当数据或用户定义的订单和条件发生变化时，您确实可以直接从控制器调用这些过滤器，这样可以避免不必要的监视。

var filteredData = $filter('filter')($scope.grid.data, $scope.isProblemInRange);
var orderedFilteredData = $filter('orderBy')(filteredData, 
                      $scope.option.problemOrderBy[option.sProblemOrderBy].key, 
                      $scope.option.sProblemSortDirection);
$scope.orderedFilteredData = orderedFilteredData;

然后在您看来，您只需要迭代已经过滤和排序的数据：

<tr data-ng-repeat="row in orderedFilteredData">

如何提高包含过滤器和重新排序的ng-repeat的效率？

1 个答案: