Question

我正在学习AngularJS，遵循Adam Freeman撰写的优秀Pro AngularJS。

我使用过滤器坚持使用ng-repeat分页。我知道有针对Angular的bootstrap ui指令，但我正在阅读本书以了解角度是如何工作的。

我的代码：

 <section class="row-fluid" ng-controller="GetAjax">
    <div class="col-md-12">
        <h2>Repater Caricato in Ajax</h2>
    </div>
    <div class="row-fluid">
        <div class="col-md-6" style="max-height: 350px; overflow-y: auto" ng-controller="PagedData">
            <ul class="list-group">
                <li  class="list-group-item" ng-repeat="item in data.visitors | filter:query |  range:selectedPage:pageSize">
                    <b>{{item.id}}.</b> {{item.first_name}} {{item.last_name}} | <small><i>{{item.email}} - {{item.country}} {{item.ip_address}}</i></small>
                </li>
            </ul>

            <ul class="pagination">
                <li ng-repeat="page in data.visitors | pageCount:pageSize"
                    ng-click="selectPage($index + 1)"
                    ng-class="pagerClass($index + 1)">
                    <a>{{$index + 1}}</a>
                </li>
            </ul>
        </div>           
    </div>
</section>

角度过滤器

angular.module("customFilters")

/******* Filters per la paginazione dei dati ******************/
//Genera il range di dati in base alla page size
.filter("range", function ($filter) {
    return function (data, page, size) {
        if (angular.isArray(data) && angular.isNumber(page) && angular.isNumber(size)) {
            var start_index = (page - 1) * size;
            console.log(data.length);

            if (data.length < start_index) {
                return [];
            } else {
                return $filter("limitTo")(data.splice(start_index), size);
            }
        } else {
            return data;
        }
    }
})
//Calcola il numero di pagine
.filter("pageCount", function () {
    return function (data, size) {
        if (angular.isArray(data))
        {
            var result = [];
            for (var i = 0; i < Math.ceil(data.length / size) ; i++) {
                result.push(i);
            }
            return result;
        }
        else
        {
            return data;
        }
    }
});

角度控制器

 .controller("GetAjax", function($scope, $http){
    $http.get('data/visitors.json').success(function(data) {
        $scope.data = {visitors : data};
    });
})
.constant("activeClass", "active")
.constant("perPage", 30)
.controller("PagedData", function($scope, $filter, activeClass, perPage){  

    $scope.selectedPage = 1;
    $scope.pageSize = perPage;

    console.log("page"+ $scope.selectedPage);

    $scope.selectPage = function (newIndex) {
        $scope.selectedPage = newIndex;
        console.log( {idx: newIndex});
    }

    $scope.pagerClass = function (index) {
        return (index == $scope.selectedPage) ? activeClass : "";
    }
});

结果是在页面渲染期间进行3次范围过滤器调用后，数据数组将丢失所有数据。奇怪的是，使用本书中的示例，这段代码非常有效。

请帮我理解我的错误：D

Answer 1

splice函数覆盖数组

如果你有一个数组


    a = [1,2,3,4];
    a.splice(2,1);
    // a = [1,2,4]

结果是a = [1,2,4]

使用切片

ng-repeat分页丢失项目

1 个答案: