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个项目，删除n-1，页面过滤所有者数组以返回n个项目。

所有正常行为。

AngularJS继续在范围中添加项目

1 个答案: