【问题标题】：AngularJS Filter for ng-repeat, how to get access to the filtered datang-repeat的AngularJS过滤器，如何访问过滤后的数据
【发布时间】：2023-03-13 05:55:01
【问题描述】：

我已尝试使标题尽可能具有描述性。我有一组数据，我使用 ng-repeat 在表格中显示。还应用了一个过滤器，因此用户可以在搜索栏中输入，它会过滤 ng-repeat 的结果，过滤器没有什么特别之处（它是默认的 过滤器。这显然会过滤数据并正确显示。问题是，我还有一个下拉菜单，允许用户指定他们想要的报告类型。

指法数据是raw，但他们可以选择bar或line，它会显示一个图表。图表的数据是在他们加载页面时创建的。它获取原始数据并将其转换为标签和系列。

我希望发生的是，当应用过滤器时，该函数会转换过滤后的数据，但我不知道如何才能真正访问该数据。有谁知道我会怎么做？

更新

我尝试将 filter 添加到控制器，然后在该函数中进行转换，如下所示：

// Apply our filter
self.applyFilter = function () {
    var filteredList = $filter('filter')(self.list, self.filter);
    self.list = filteredList;
    self.chartData = provider.getOverdueData(filteredList);
};

问题在于，它被多次调用并导致 $rootScope:infdig Infinite $digest Loop 错误。

【问题讨论】：

标签： angularjs

【解决方案1】：

好的，所以错误是由每次调用 applyFilter 时创建的新数组引起的。我不确定为什么实际的过滤器起作用（即在视图中）而不是在函数中，因为它们在做同样的事情？！但是我能够通过使用 angular.equals 来解决这个问题。首先，当我获取数据时，我必须将结果存储到一个单独的数组中，然后当我调用我的 filter 时，我可以使用未修改的数组。

// Get our report
provider.overdueCollections().then(function (response) {
    self.models = response;
    self.list = response;
    self.predicate = 'center';
    self.chartData = provider.getOverdueData(response);
});

完成后，表格使用 self.list 作为数据源，但 applyFilter 使用 self.models 来应用过滤到。现在看起来像这样：

// Apply our filter
self.applyFilter = function () {

    // Create our filtered list
    var filteredList = $filter('filter')(self.models, self.filter);

    // Check to see if we are the same as the current list
    var isSame = angular.equals(self.list, filteredList)

    // If we are not the same
    if (!isSame) {

        // Update our scope
        self.list = filteredList;
        self.chartData = provider.getOverdueData(filteredList);
    }
};

这意味着数据仅在发生变化时才应用于范围。

【讨论】：