How to update a specific value inside ng-repeat in Angular?
Question
So I have a code that gets all the products in my api :
Controller
loadProducts();
function loadProducts() {
$http.get('/api/products').then(function(response) {
$scope.products = response.data
});
}
$scope.Update = function(id) {
//do update code here and when it succeeds, load products function
loadProducts();
}
HTML
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Action</td>
</tr>
<tr ng-repeat="p in products">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update(p.id)"></a></td>
</tr>
</table>
The code is working though I have lots of data being loaded that whenever I update a single item, the whole data will be loaded again.
Is there a way that for example, I updated a single item,and it will be the only one being loaded instead of loadProducts(); loading everything?
Any help would be much appreciated.
5 answers
solution1
3 ACCPTED 2016-12-27 12:53:31
On recalling of loadProducts from update your fetching same data....so you dont need to call it again.....only if u want to fetch some new based on some id or something then only you need it......have a look at below code how to replace the existing array data with index value
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.products = [ {"id":1,"name":"a"}, {"id":2,"name":"b"}, {"id":3,"name":"c"}, {"id":4,"name":"d"}, ]; $scope.Update = function(id,index) { $scope.products[index].name="h"; } });
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <table> <tr> <td>ID</td> <td>Name</td> <td>Action</td> </tr> <tr ng-repeat="p in products"> <td>{{ p.id }}</td> <td>{{ p.name }} </td> <td><button ng-click="Update(p.id,$index)">upit</button></td> </tr> </table> </body> </html>
Here i added a sample data for you and when you click on a upit i am passing the index value to update function....by using this i am overriding the name property...like if you have new data from api then also you use this by fetching the data first and inserting like this.
solution2
1 2016-12-27 12:43:11
Do not call loadProducts() on updating each item. Since angular supports Two-way data binding ,whenever you update data it will remain on the client side.
$scope.Update = function(id) {
//remove from here
loadProducts();
}
Once everything is updated, provide a way to store it on the server side. Load all the products, whenever an application is loaded initially.
In order to limit the data that needs to be shown on the interface, you can use limitTO inside ng-repeat
<tr ng-repeat="p in products | limitTo : 100">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update(p.id)"></a></td>
</tr>
solution3
1 2016-12-27 12:46:02
No need to call loadProducts again, simply update the existing products array
$scope.Update = function(id, $index) {
//do update code here and when it succeeds, update the existing products array
$scope.products[$index] = updatedProduct;
}
solution4
1 2016-12-27 12:46:50
Option 1: Use $index to track the index of the ng-repeat.
<tr ng-repeat="p in products">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update($index)"></a></td>
</tr>
Inside your controller:
$scope.Update = function(index) {
$scope.products[index].name = newValue; //Update Name of a particular Product
}
This edition will be populated to the View.
Option 2: Pass the product as a parameter to the controller function Update .
<tr ng-repeat="p in products">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update(p)"></a></td>
</tr>
Inside your controller:
$scope.Update = function(product) {
product.name = newName; //Update Name of a particular Product
}
solution5
1 2016-12-27 12:51:15
Pass the property and index to update. $index you can get the current item index. Also if you need to update the second item only in products then you can check it $index==2.
<tr ng-repeat="p in products">
<td>{{ p.id }}</td>
<td>{{ p.name }} </td>
<td><a ng-click="Update(p.id, $index)"></a></td>
</tr>
</table>
$scope.Update = function(id, index) {
$scope.products[index] = updatedProduct;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.