Question

我有一张显示的人员表，如果有超过3人，则应显示分页控件。我想允许用户在该表中添加/删除人员。

我已经能够从表中添加和删除，如果有3个或更少的人，它们会正确显示。如果我添加第四个人，我希望分页控件转到第二页和第一行。然而，似乎发生的是分页控制，将显示“＆＃39; 2＆＃39;对于可能的页码，但第四人显示在第一页....所有其他人添加也转到第一页。好像底部的页码不起作用 - 页面没有变化。我确实更新了当前的页面值，但它似乎没有被反映出来。

以下是我的视图的一部分。其中有一些额外的部分与寻呼无关。如果单击“添加潜在客户”按钮，我会使用它们到达正确的行，为用户提供输入字段以输入员工姓名。一旦他们找到了他们正在寻找的人，那么就会显示这些值。

<table class="table" >
  <tbody ng-repeat="boLead in components[selectedRow].boleads " pagination-id="boleads" >
    <tr >                                   
        <td id="leadId" >{{boLead.boLeadId}}</td>
        <td ng-show="(inserted == boLead && newLead) ">
            <input type="text" class="form-control" ng-model="boLead.boLead" ng-model-options='{ debounce: 800 }' ng-change="searchEmployee(boLead.boLead)" /> 
                <table class="table table-hover table-bordered" ng-show="employees.length">
                    <tr>
                        <th>Employee ID</th>
                        <th>Employee Name</th>
                    </tr>
                    <tr ng-repeat="result in employees" ng-click="pickEmployee(result, boLead)">
                        <td>{{result.user_id}}</td>
                        <td>{{result.name}}</td>
                    </tr>
                </table>
        </td>
        <td ng-show="(inserted != boLead && !editq  || (editq && editl != ($index+(3*(pagination.current-1)))) )">{{boLead.boLead}}</td>
        <td ng-if="mode == 'edit'">
            <select  class="form-control input-md" ng-model="boLead.forwardONS" >
                <option>Yes</option>
                <option>No</option>
            </select>
        </td>
        <td ng-if="mode == 'edit' && (!checkNewLead(boLead) && !editq)">
            <button type="button" ng-click="removeLead($index+(3*(pagination.current-1)))" class="btn btn-danger fa fa-trash"> Delete</button>
        </td>
        <td ng-if="mode == 'view'" ng-bind-html="boLead.forwardONS"></td>
    </tr>
  </tbody>
</table>
<uib-pagination  previous-text="&lsaquo;" next-text="&rsaquo;" ng-model="pagination.current"  class="pagination-sm" ng-if="pagination.totalLeads > 3" items-per-page="3" total-items="pagination.totalLeads" boundary-link-numbers="true"></uib-pagination>

控制器：这是将人员添加到列表中的部分

    $scope.addLead = function() {
    $scope.inserted = {
        prgGuid: $scope.components[$scope.selectedRow].prgGuid,
        componentId: $scope.components[$scope.selectedRow].componentId,
        boLeadId: '',
        boLead : '',
        forwardONS: ''
    };

    if (typeof $scope.components[$scope.selectedRow].boleads == 'undefined') {

        $scope.components[$scope.selectedRow].boleads = new Array($scope.inserted);
    } else {

        $scope.components[$scope.selectedRow].boleads.push($scope.inserted);
    }

    $scope.newLead = true;
    $scope.editq = true;
    $scope.editl = $scope.components[$scope.selectedRow].boleads.length-1;
    if ($scope.components[$scope.selectedRow].boleads.length > 3) {
        var pg = Math.ceil($scope.components[$scope.selectedRow].boleads.length / 3);
        $scope.pagination.current = pg;
    }
    $scope.pagination.totalLeads = $scope.components[$scope.selectedRow].boleads.length;
};

当我单步执行此操作时，$ scope.pagination.current = pg;使用当前页面应该正确更新。例如，一旦添加了第4个人，它就变成2.这是分页控件中的ng-model，但它看起来似乎不是分页，因为屏幕没有变为显示新的行，但所有四个显示。

我查看过很多帖子，但我似乎做的事情与大家不同 - 我找不到有人添加一行的例子，然后当有足够的条目时需要屏幕页面去一个新的页面。

Answer 1

在查看更多示例之后，我似乎已经能够解决我的问题...我在表格中添加了一个切片，它似乎完全符合我的需要......

我更改了这一行：

 <tbody ng-repeat="boLead in components[selectedRow].boleads " pagination-id="boleads" >

为：

<tbody ng-repeat="boLead in components[selectedRow].boleads.slice(((pagination.current-1)*3), ((pagination.current)*3)) " pagination-id="boleads" >

添加新行时，uib-pagination无法正确分页

1 个答案: