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

我有一个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应用控制器中，我具有create方法。这两种方法是调用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
    })
}

这些代码工作正常，但是加载页面花费了很多时间。因此，我可以做些什么来减少加载时间，或者有什么更好的方法可以做同样的事情。

任何帮助将是可观的。谢谢

最佳答案

如果没有理由要替换整个数据集，则只应更新更改的行。确保您的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;
            }
        };
    })
}