When making an API call to retrieve a list of data, I utilize ng-repeat to iterate through the items (which consists of over 100 entries).
To fetch the data list, I make an API call in the App Controller of my AngularJS app like this:
var path = serverUrl + 'api/getAllMails';
$http.get(path).then(function (result) {
$scope.mails=result
})
To display the mails in an HTML file, I use a table structure as shown below:
<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>
In the initial iterations, the cost is set to "100" and the status is set to "pending". If I need to update this row by changing the cost to "1000" and the status to "Delivered", how can I achieve this?
In the AngularJS App controller, I have defined two methods for updating data via APIs and modifying the database records to provide the updated list of mails.
$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
})
}
Although the code functions properly, there is an issue with page loading time. How can I optimize the loading performance or is there a more efficient approach to achieving the same functionality?
Any suggestions or assistance would be greatly appreciated. Thank you.