javascript - 如何使用 Angular 中的 api 调用更新数据库中的数据

Question

我有一个 API 调用，它给了我数据列表，我正在通过 ng-repeat 迭代数据(它是一个包含 100 多个项目的列表)

为了获取数据列表，我在 angularjs 中的 App Controller 中调用了 Api，如下所示:

 var path = serverUrl + 'api/getAllMails';
    $http.get(path).then(function (result) {
      $scope.mails=result
    })

为了迭代 Html 文件中的邮件，我使用如下表

<table>
    <tr class="header">
        <th class="center">Id</th>
        <th class="center">Mode of Payment</th>
        <th class="center">Payment Collected</th>
        <th class="center">Status</th>
    </tr>
    <tr ng-repeat="mail in mails">
        <td>{{mail.id}}</td>
        <td>{{mail.paymentType}}</td>
        <td>Rs. {{mail.cost}}
            <input type="text" ng-model="mail.cost">
            <button ng-click="updateCost=(mail.id, mail.cost)">Update Cost</button>
        </td>
        <td>{{mail.status}}
            <input type="text" ng-model="mail.status">
            <button ng-click="updateStatus(mail.id, mail.status)">Update Status</button>
        </td>
    </tr>
</table>

假设在第一次迭代中，成本为“100”，状态为“待处理”。我只需更新这一行，将成本更改为“1000”，状态将为“已交付”。

在我的 Angularjs 应用程序 Controller 中，我有创建方法。这两个方法都是调用api，更新数据库中的数据，并返回更新后的邮件列表。

$scope.updateStatus = function(mailId, mailStatus) {
    var path = serverUrl + 'api/updateStatus';
    $http.get(path, {
        params: {
            mailId: mailId,
            mailStatus: mailStatus
        }
    }).then(function(result) {
        $scope.mails = result
    })
}

$scope.updateCost = function(mailId, mailCost) {
    var path = serverUrl + 'api/updateStatus';
    $http.get(path, {
        params: {
            mailId: mailId,
            mailCost: mailCost
        }
    }).then(function(result) {
        $scope.mails = result
    })
}

这些代码工作正常，但加载页面需要花费大量时间。那么我能做些什么来减少加载时间或者有没有更好的方法来做同样的事情。

任何帮助将不胜感激。谢谢

Answer 1

如果没有任何原因，您将替换整个数据集，您应该只更新您更改的行。确保您的 updateStatus 返回您更新的对象并更新 $scope.mails

中的该项目

在示例中

$scope.updateCost = function(mailId, mailCost) {
    var path = serverUrl + 'api/updateStatus';
    $http.get(path, {
        params: {
            mailId: mailId,
            mailStatus: mailCost
        }
    }).then(function(result) {
        // result is the item you changed
        for (var i = $scope.mails.length - 1; i >= 0; i--) {
            if($scope.mails[i].id === mailId) {
                $scope.mails[i] = result;
                return;
            }
        };
    })
}