Question

我终于设法使我的日期过滤器工作，但现在我遇到了问题......

我有一个简单的表，应该按名称和日期进行过滤。它正确过滤但日期过滤器非常慢。经过调试和研究后，我知道问题是我的自定义日期范围（从 - 到）过滤器被多次调用。它被称为：

当我点击日历选择日期但在实际显示日历控件之前
显示日历后立即
选择日期后

如果我在打开日历后没有选择任何日期，它甚至会运行前2次。每当我从一个月改为另一个月时，它也会运行。

此外，对于每次调用过滤器的3次，它对于列表中的每一行也会运行一次。在示例中，我只有10行（它实际上很快）但在我的应用程序中它有更多的maaany并且需要很长时间。

理想情况是，在选择日期后，此代码仅被调用一次。

为简单起见，我在这里展示了几行代码，但您可以在Plunker上看到整个示例：

HTML代码：

<!-- This is the datepicker control filter -->
<ng-datepicker ng-model="DateRegisteredFrom" view-format="MM/DD/YYYY" placeholder="mm/dd/yyyy"></ng-datepicker>

<!-- Here is the table  -->
<tr ng-repeat="item in model.People | filter:searchText | dateRegisteredFilter:DateRegisteredFrom:DateRegisteredTo | orderBy:orderByField:reverseSort ">
</tr>

这是我的javascript代码：

.filter("dateRegisteredFilter", function($filter, $rootScope) {
    return function(items, from, to) {
       return $filter('filter')(items, "DateRegistered", function(v) {

           // Filter code...

      });
   };
});

经过大量的阅读和研究，我学会了两件事：

由于＆＃34;脏检查＆＃34;我的代码被多次调用由棱角完成（我通过这个答案阅读它：ng-repeat execute many times）
日期的实际比较很慢（如果代码只执行一次但不是很多，那就没问题了）

如果有人能指出我正确的方向，或者如果我在读书时做错事，我会很感激，我只能找到发生这种情况的原因，但我可以＆＃39;找到解决方案或建议。

Answer 1

我认为您需要改变处理ng-repeat的方式。如您所知，这些过滤器一直在运行，因此导致事情运行缓慢。您应该做的是在控制器中单独转换model.People中的数据，而不是通过多个过滤器进行管道传输。这样做，您可以更好地控制过滤的完成时间和地点。

这个链接有一个很酷的gif，有助于说明事情的原因如此缓慢https://medium.com/@lightingbeetle/some-best-practices-when-building-a-large-angular-application-c346734a4e9c

Angularjs ng-repeat与datepicker过滤器执行多次

1 个答案: