CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
wobsoriano
wobsoriano

Reputation: 13462

How to update a specific value inside ng-repeat in Angular?

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.

Upvotes: 2

Views: 9441

Answers (5)

Sa E Chowdary
Sa E Chowdary

Reputation: 2075

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="[email protected]" 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.

Upvotes: 4

Manu Obre
Manu Obre

Reputation: 2304

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
}

Upvotes: 1

Balaji Marimuthu
Balaji Marimuthu

Reputation: 2058

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

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222722

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>

Upvotes: 1

Ankit Khedekar
Ankit Khedekar

Reputation: 924

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

Upvotes: 1

Related Questions