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的App控制器中，我创建了方法。这两种方法是调用apis并更新数据库中的数据并返回更新的邮件列表。

$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;
            }
        };
    })
}

如何使用api调用角度来更新数据库中的数据

1 个答案: