ng-repeat自定义过滤器生成无限循环

Question

我正在迭代一个页面/文章列表。我想从列表中删除没有文章ID的页面（它们是部分首页）。我已经制作了一个自定义过滤器来确定文章是否具有id（'removeFrontpages'），但它生成了一个无限循环（列表一遍又一遍地加载）。当我删除过滤器时，列表加载一次。

我没有审核列表中的对象，只是过滤掉一些文章。我究竟做错了什么？是否可以在ng-repeat上制作过滤器，还是应该在之前（在服务/控制器中）过滤列表？

这是我的过滤器：

"use strict";

angular.module("app")
    .filter('removeFrontpages', [function() {
        return function (articles) {
            var filtered = [];

            if (typeof articles !== "undefined") {

                angular.forEach(articles, function (article) {

                    if (typeof article.id !== "undefined" && article.id !== "") {
                        filtered.push(article);
                    }

                });
            }
            return filtered;
        };

    }]);

我的指令模板如下所示：

<div class="row header">
    <div class="col-xs-1 col-xs-offset-1 header-visits"><h4><a ng-click="reorder('stats.people');">Besøg</a></h4></div>
    <div class="col-xs-9 header-title"><h4><a ng-click="reorder('title');">Titel</a></h4></div>
    <div class="col-xs-1 header-engagedtime"><h4><a ng-click="reorder('stats.engaged_time.avg');">Tid</a></h4></div>
</div>

<div ng-repeat="article in articles | removeFrontpages | orderBy: orderBy:isReverseOrder | limitTo: limit track by article.id" index-class>

    <!-- index -->
    <div class="col-xs-1 list-index">
        {{ $index+1 }}
    </div>

    <!-- visits -->
    <div class="col-xs-1">
        <span class="stats-text">{{ article.stats.people }}</span>
    </div>

    <!-- title -->
    <div class="col-xs-9">
        <a href="http://{{article.path}}" target="_blank" class="article-title">{{ article.title }}</a>

        <div class="row" ng-if="dashboardType != 'top articles from social media'">
            <div class="col-xs-12 article-stats">

                <div class="pull-left article-mobile">
                    <i class="fa fa-mobile dark-grey"></i>
                    <span class="stats-text">{{ article.stats.platform.m }}</span>
                </div>

                <div class="pull-left">
                    <i class="fa fa-link dark-grey"></i>
                    <span class="stats-text">{{ article.stats.links }}</span>
                </div>

                <div class="pull-left">
                    <i class="fa fa-clock-o dark-grey"></i>
                    <span class="stats-text">{{ article.publishDate | date: 'dd/MM hh:mm'}}</span>
                </div>

            </div> <!-- end col-xs-12 -->
        </div> <!-- end row -->

        <div class="row" ng-if="dashboardType == 'top articles from social media'">
            <div class="col-xs-12">
                <progressbar class=""
                             max="1"
                             value="(article.stats.social/ article.stats.count)"
                             type="info">
                    <span class="progressbar-text">
                        {{ (article.stats.social / article.stats.count) * 100 | number:0 }}%
                    </span>
                </progressbar>

            </div> <!-- end col-xs-12 -->
        </div> <!-- end row -->
    </div>

    <!-- engaged time -->
    <div class="col-xs-1">
        <span class="stats-text" ng-if="article.engaged_time.avg >= 0">{{ article.engaged_time.avg | secsToMMSS }}</span>
        <span class="stats-text" ng-if="article.stats.engaged_time >= 0">{{ article.stats.engaged_time | secsToMMSS }}</span>
        <span class="stats-text" ng-if="article.stats.engaged_time.avg >= 0">{{ article.stats.engaged_time.avg | secsToMMSS }}</span>
    </div>

</div> <!-- end article -->