角度智能表 - 分页对刷新数据对象不起作用

Question

我正在使用angular-smart-table，我可以通过分页正确显示我的数据。我确实在同一页面上添加了新记录/更新现有记录。这里是参考的屏幕截图-但是在这里，我在添加新记录/更新现有记录后面临分页问题。这是在刷新对象时，它不考虑分页并一次显示同一页面上的所有记录。

这是我的控制器代码 -

$scope.smartTablePageSize = 10;
$scope.rowsPerPage = [5, 10, 15, 20, 25];

// my function to add a new record
vm.insertAccount = function() {
    if(vm.validateAll())
        $http({
            method: 'POST',
            url: addAccountUrl,
            data: vm.accountInfo,
            headers: { 'Content-Type': 'application/json' }
        }).then(function(success) {
            vm.getAllAccountsData();    // refreshing data object
        }, function(error) {
        });
}

// function to refresh data object
vm.getAllAccountsData = function() {
    $http.get(accountListUrl)
        .then(function(success) {
            if (success.data) {
                vm.allAccountsData = success.data;    // updating data here
            }
        }, function(error) {

        })
}

和各自的HTML -

<div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="col-xs-12 form-inline form-group mt-20">
        <label for="rows">Rows on page</label>
        <select class="form-control show-tick" id="rows" title="Rows on page" selectpicker ng-model="smartTablePageSize" ng-options="i for i in rowsPerPage">
        </select>
    </div>
    <table class="table mt-20 mb-20" ng-if="vm.allAccountsData.length > 0" st-table="vm.allAccountsData">
        <thead class="sortable">
            <tr>
                <th class="table-id" st-sort="id" st-sort-default="true">#</th>
                <th st-sort="accounttype">Account Type</th>
                <th st-sort="vendor">Vendor</th>
                <th st-sort="accountnumber">Account No.</th>
                <th st-sort="paymentmode">Payment Mode</th>
                <th st-sort="ponumber">PO No.</th>
                <th st-sort="vendorcode">Vendor Code</th>
                <th st-sort="costcenter">Cost Center</th>
                <th st-sort="glcode">GL Code</th>
                <th>Action</th>
            </tr>
            <tr>
                <th></th>
                <th>
                    <input st-search="accounttype" placeholder="Search Account Type" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="vendor" placeholder="Search Vendor" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="accountnumber" placeholder="Search Account No." class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="paymentmode" placeholder="Search Payment Mode" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="ponumber" placeholder="Search PO No." class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="vendorcode" placeholder="Search Vendor Code" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="costcenter" placeholder="Search Cost Center" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="glcode" placeholder="Search GL Code" class="input-sm form-control search-input" type="search" />
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in vm.allAccountsData">
                <td class="table-id">{{item.index + 1}}</td>
                <td>{{item.accounttype}}</td>
                <td>{{item.vendor}}</td>
                <td>{{item.accountnumber}}</td>
                <td>{{item.paymentmode}}</td>
                <td>{{item.ponumber}}</td>
                <td>{{item.vendorcode}}</td>
                <td>{{item.costcenter}}</td>
                <td>{{item.glcode}}</td>
                <td>
                    <button class="btn btn-info editable-table-button btn-xs" ng-click="vm.editAccount(item);">View/Edit</button>
                    <button class="btn btn-danger editable-table-button btn-xs" ng-click="vm.confirmDeleteAccountModal('app/pages/utilities/pdfNormalizer/confirm-delete-account.html', 'sm', item)">Delete</button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="10" class="text-center">
                    <div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="10"></div>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

因此，在刷新对象时，我期望的是具有分页的类似表，如上所示。我得到的是所有记录的表格，而不考虑分页 -

Answer 1

我挣扎了一下，找到了答案！我们可以在angular-smart-table上使用st-safe-src指令。

我用它作为 -

<table class="table mt-20 mb-20" st-table="allAccountsData" st-safe-src="vm.allAccountsData">

其中，allAccountsData是一个临时数据对象，vm.allAccountsData是一个实际的数据对象。

然后，我在allAccountsData迭代 -

<tr ng-repeat="item in allAccountsData">

而已！控制器代码没有任何变化！