Question

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

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

正在努力发现这一点，可能有几种方法可以避免这种情况。

限制在表定义中使用st-safe-src。（但是这个选项仅适用于同步表加载。该表是如果我删除了安全来源，将不会被填充
使用变量存储/检索动态表单控件的状态，例如此示例进行了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);
    })
};

保留有关表分页的更改数据-AngularJS

0 个答案: