AngularJS不断在范围内添加项目

Question

我在控制器中使用此方法为我的应用程序制作了一个虚拟数据：

$scope.owners = [];

        for (var i = 1; i <= 14; i++) {
            $scope.owners.push({
                id: i,
                systemCode: '00' + (1284538+i),
                systemName: 'Desktop',
                description: 'Lorem ipsum dolor',
                operational: '2973238',
                business: '5621253',
                manager: 'Dr. Smith',
                status: 'Active'
            });
        }

并添加此函数以执行删除请求：

$scope.rowDelete = function(row){
            $scope.owners.splice((this.owner.id - 1), 1);
        }

以及用于分页的页面过滤器：

MyApp.filter('page', function () {
    return function (list, page, size) {
        var start = 0, end = 0;

        //console.log('page filter...', page, size);
        page = page || 1;

        if (angular.isArray(list)) {
            end = list.length;

            if (page && Number(page) && size && Number(size)) {
                page = Number(page);
                size = Number(size);

                start = (page - 1) * size;
                end = start + size;
            }

            return Array.prototype.slice.call(list, start, end);
        }

        return null;
    }

});

在 HTML 模板中，我使用了 ng-repeat 和自定义过滤器：

<tr data-ng-repeat="owner in owners | page:$stateParams.page:2">
<td class="table-cell-clean">
    <a href="javascript:;" data-ng-click="rowDelete()" class="btn btn-clean"><i class="mg-icon-delete"></i></a>
</td>
<td>{{ owner.systemCode }}</td>
<td>{{ owner.systemName }}</td>
<td>{{ owner.description }}</td>
<td>{{ owner.operational }}</td>
<td>{{ owner.business }}</td>
<td>{{ owner.manager }}</td>
<td class="align-center">{{ owner.status }}</td>

每当我单击删除按钮时，都会按预期调用 rowDelete()，该行被删除，但一旦它离开 DOM，下一页的新项目就会插入到当前表中。

可能出了什么问题？

Answer 1

这和预期的一样。您的所有者数组正在被修改，这需要重新评估 ng-repeat 表达式，其中包括页面过滤器表达式作为它的一部分。因此，通过删除一行来修改所有者，ng-repeat 检测到更改并重新评估重复表达式，在它可以迭代数组之前，它通过页面过滤器运行所有者。所以每页n个项目，delete留下n-1个，page过滤owners数组返回n个项目。

所有正常行为。