Angularjs：自定义角度过滤器导致无限循环答案

【问题标题】：Angularjs: custom angular filter leads to infinite loopAngularjs：自定义角度过滤器导致无限循环
【发布时间】：2015-09-29 20:09:59
【问题描述】：

在我的 Ionic 应用程序中，我在我的 filter.js 文件中创建了一个自定义过滤器“分区”（见下文）。

我试图在模板中像这样使用它，但我得到一个 rootscope 错误：错误：[$rootScope:infdig]http://errors.angularjs.org/1.2.25/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…inder%20Max%20-%20Keely%20Andrew%5C%22%3B%20oldVal%3A% 20undefined%22%5D%5D

你能帮我解决这个问题吗？

谢谢

模板结果.html：

<ion-slide-box show-pager="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
            <ion-slide ng-repeat="batch in prodata | partition:8 track by $index">
                <ul>
                    <li ng-repeat="item in batch track by $index">
                        <a class="suggestPro" href="#">
                            <span><img ng-src="img/boards/{{item.imageName}}" /></span>
                            <p class="flex-caption"> {{item.model}} - {{item.name}}</p>
                        </a>
                    </li>
                </ul>
            </ion-slide>
        </ion-slide-box>

app.js：

angular.module('BoardLine', ['ionic', 'ngCookies', 'ui.unique', 'BoardLine.controllers', 'BoardLine.services', 'BoardLine.filters'])

filter.js：

angular.module('BoardLine.filters', [])

.filter('nospace', function() {
    return function (value) {
        return (!value) ? '' : value.replace(/ /g, '');
    };
})

.filter('partition', function() {
    return function(array, size) {
        var newArray = [], i, next;

        for(i = 0; i < array.length; i = next) {
            next = i + size;
            newArray.push(array.slice(i, next));
        }

        return newArray;
    };
});

【问题讨论】：

@PankajParkar track by 必须使用过滤器
@Emre 错误就在页面显示之前，在控制台中：错误：[$rootScope:infdig] errors.angularjs.org/1.2.25/$rootScope/……5C%5Ct%5C%5Ct%20%20%20%20 %5C%5Ct%5C%22%3B%20oldVal%3A%20undefined%22%5D%5D
如果您点击错误中的链接，则表明您的代码中存在无限循环。你可能想检查你的 2 ng-repeats
好的，谢谢，如果你看看我的两个 ng-repeats 似乎没有无限循环
@Emre 你能帮帮我吗，我认为无限循环来自过滤器的编码方式......

标签： angularjs ionic-framework ionic

【解决方案1】：

实现此结果的另一种解决方案，不使用“分区”过滤器，并使用limitTo：

    <ion-slide-box show-pager="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
        <ion-slide ng-repeat="s in [0,1,2,3,4,5,6]">
            <ul>
                <li ng-repeat="item in prodata | matchingProBrand:computed.proName:computed.proBrand | limitTo:s*8+8  | limitTo:-8">
                    <a class="suggestPro" ng-click="launchComputeService(item.id)">
                        <span><img ng-src={{imagesUrls[item.imageName]}} /></span>
                        <p class="flex-caption"> {{item.model}} - {{item.name}}</p>
                    </a>
                </li>
            </ul>   
        </ion-slide>

    </ion-slide-box>

【讨论】：