angularjs - 在表格分页上保留更改的数据 - AngularJS

Question

我需要提交在我的 angularjs 表中所做的更改。该表是异步填充的，因此分页是动态的。

每当我在页面中进行更改（例如：第 1 页）并移至任何其他页面（例如：第 2 页）时，第 1 页中更改的数据在再次访问时会被重置。更改的数据不会照此维护。

努力看到这一点，可能有几种方法可以避免这种情况。

1. 限制在表定义中使用 st-safe-src。（但此选项仅适用于同步表加载。如果我删除安全源，则不会填充表）
2. 使用变量来存储/检索动态表单控件的状态，例如这个示例，它有一个 ajax 调用并基于 ajax 验证填充整个输入标签，这也不起作用，因为我的选择选项的默认值是基于数据库输入。

有没有可能在angularjs中做到这一点？

我的桌子：

<table id="recordTable" st-table="display_record_returns"  st-safe-src="recordReturns" ng-show="recordReturns"
   class="table table-bordered table-striped shadow p-3 mb-5 bg-white rounded" ng-controller="BotRulesController">
   <thead class="thead-dark">
      <tr>
         <th style="white-space: nowrap">CASE NO</th>
         <th st-sort="code">MATCH CODE</th>
         <th st-sort="decision">RULE</th>
         <th st-sort="email">EMAIL</th>
      </tr>
   </thead>
   <tbody>
      <tr id="row.code" valign="middle" st-select-row="row"
         st-select-mode="multiple"
         ng-repeat="row in display_record_returns track by row.code"
         ng-attr-id="{{::row.code}}">
         <td>{{$index + 1}}</td>
         <td align="left" ng-bind="row.code"></td>
         <td>
            <select id="ruleChangeSelect_{{row.code}}" ng-change="ruleChanged(row.code, row.decision, selectionModel[row.code])" class="custom-select"
               style="margin-left: 0px"
               ng-model="selectionModel[row.code]"
               ng-options="choice.name for choice in possibleOptions track by choice.id">
               <option value="" hidden="hidden" readonly="" ng-hide="true"></option>
            </select>
         </td>
         <td ng-bind="row.email"></td>
      </tr>
   </tbody>
   <tfoot>
      <tr style="font-size:0.8rem !important;">
         <td colspan="22" class="text-center">
            <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"></div>
         </td>
      </tr>
   </tfoot>
</table>

我的js：

$scope.getRules = function () {

    $http({
        'url': '/getRules',
        'method': 'POST',
        'headers': {
            'Content-Type': 'application/json'
        }
    }).then(function (response) {
        $scope.recordReturns = response.data;
        $scope.ruleOptions = [{
            decision: "A"
        }, {
            decision: "B"
        }, {
            decision: "C"
        }];

        $scope.possibleOptions = getUniqueValues($scope.ruleOptions, 'decision')
            .map(function (id) {
                return {
                    id: id,
                    name: id
                }
            });

        $scope.selectionModel = {};

        angular.forEach($scope.recordReturns, function (input) {
            $scope.selectionModel[input.code] = $scope.possibleOptions.filter(function (opt) {
                return opt.id === input.decision;
            })[0];
        });

        function getUniqueValues(array, prop) {
            return [...new Set(array.map(item => item[prop]))];
        }

        $window.scrollTo(0, 0);
    })
};

标签： angularjspaginationsmart-table