AngularJS自定义过滤器调用两次并在第二次调用时删除输入数据(AngularJS custom filter called twice and delete input data on second call)

 这是代码。 
 
var app = angular.module("nameApp", ["ngRoute"]);

app.controller("ctrlname", function ($scope, $http, $filter, apiKey, apiUrl) {
    $scope.data = {};
    $scope.currentPage = 1;
    $scope.pageSize = 5;
});
 
 $ scope.data将包含来自HTTP GET请求的数据数组。 以下是用于分页结果的自定义过滤器的代码。 基本上，这会将结果限制为仅5.分页按钮将更新$ scope.currentPage的值。 
 
app.filter("limitResults", function ($filter, $log) {
    return function (data, page, size) {
        if (angular.isArray(data) & angular.isNumber(page) && angular.isNumber(size)) {
            var startPage = (page - 1) * size;
            if (data.length < startPage) {
                return [];
            } else {
                $log.info(data);
                $log.info(page);
                $log.info(size);
                $log.info(startPage);
                return $filter("limitTo")(data.splice(startPage), size);
            }
        } else {
            return data;
        }
    }
});
 
 这是将呈现数据的HTML页面。 
 
<div class="row resultItems" ng-repeat="video in data.videos | limitResults:currentPage:pageSize">
    <div class="col-sm-3 testing">
        <img ng-src="{{video.snippet.thumbnails.default.url}}">
    </div>
    <div class="col-sm-9 testing">
        <h5>
            {{video.snippet.title}}
        </h5>
        <p>
            {{video.snippet.channelTitle}}
        </p>
        <p>
            {{video.snippet.description}}
        </p>
    </div>
</div>
 
 我在自定义过滤器中放了几行$ log.info代码，以便了解应用过滤器时到底发生了什么。 过滤器运行两次，这是正常行为。 
 
 我发现令人困惑的是，当自定义过滤器第一次运行时，$ log.info（data）将从HTTP GET调用接收的原始数据记录到控制台。 但是，当自定义筛选器第二次运行时，$ log.info（data）会将一个空数组记录到控制台。 
 
 鉴于“$ log.info（data）; $ log.info（page）; $ log.info（size）;” 登录到控制台，显然第二个IF语句（if（data.length <startPage））被评估为TRUE和过滤器（返回$ filter（“limitTo”）（data.splice（startPage），size） ;） 被申请;被应用。 
 
 我只是不明白为什么数组，即传递给自定义过滤器的数据，在过滤器第二次运行时被清空。 

Here are the codes.
 
var app = angular.module("nameApp", ["ngRoute"]);

app.controller("ctrlname", function ($scope, $http, $filter, apiKey, apiUrl) {
    $scope.data = {};
    $scope.currentPage = 1;
    $scope.pageSize = 5;
});
 
The $scope.data will contain an array of data from an HTTP GET request. The following is a code for a custom filter for the purpose of pagination of results. Basically, this will limit the results to only 5. Buttons for pagination will update $scope.currentPage's value.
 
app.filter("limitResults", function ($filter, $log) {
    return function (data, page, size) {
        if (angular.isArray(data) & angular.isNumber(page) && angular.isNumber(size)) {
            var startPage = (page - 1) * size;
            if (data.length < startPage) {
                return [];
            } else {
                $log.info(data);
                $log.info(page);
                $log.info(size);
                $log.info(startPage);
                return $filter("limitTo")(data.splice(startPage), size);
            }
        } else {
            return data;
        }
    }
});
 
This is the HTML page that will render the data.
 
<div class="row resultItems" ng-repeat="video in data.videos | limitResults:currentPage:pageSize">
    <div class="col-sm-3 testing">
        <img ng-src="{{video.snippet.thumbnails.default.url}}">
    </div>
    <div class="col-sm-9 testing">
        <h5>
            {{video.snippet.title}}
        </h5>
        <p>
            {{video.snippet.channelTitle}}
        </p>
        <p>
            {{video.snippet.description}}
        </p>
    </div>
</div>
 
I put a few lines of $log.info code in the custom filter in order to see what really happens when the filter is applied. The filter runs twice, which is a normal behaviour.
 
What I find confusing is that when the custom filter runs for the first time, $log.info(data) logs the original data received from a HTTP GET call to the console. However, when the custom filter runs for the second time, $log.info(data) logs an empty array to the console.
 
Given the fact that "$log.info(data); $log.info(page); $log.info(size);" get logged to the console, it is obvious that the second IF statement (if (data.length < startPage)) is evaluated to TRUE and the filter (return $filter("limitTo")(data.splice(startPage), size);) is applied.
 
I just don't understand why the array, which is the data passed to the custom filter, gets emptied when the filter runs the second time.

原文：https://stackoverflow.com/questions/36584663