如何在Angular的ng-repeat中更新特定值？

Question

所以我有一個代碼可以獲取api中的所有產品：

控制者

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>

盡管我正在加載大量數據，但代碼仍在工作，每當我更新單個項目時，整個數據都將再次加載。

例如，有沒有一種方法，我更新了一個項目，它將是唯一要加載的項目，而不是loadProducts(); 加載一切嗎？

任何幫助將非常感激。

Answer 1

在調用loadProducts進行更新以獲取相同的數據時....因此，您無需再次調用它.....僅當您要基於某些ID或某些內容來獲取一些新數據時，才需要它。 ..看看下面的代碼如何用索引值替換現有的數組數據

 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>

在這里我為您添加了一個示例數據，當您單擊一個upit時，我正在傳遞索引值以更新功能....使用此方法，我將覆蓋name屬性...就像您從api獲得新數據一樣，您可以通過先獲取數據並像這樣插入來使用它。

Answer 2

不要在更新每個項目時調用loadProducts（）。 由於angular支持Two-way data綁定，因此，無論何時更新數據，它都將保留在客戶端。

$scope.Update = function(id) {
  //remove from here
  loadProducts();
}

更新所有內容后，請提供一種將其存儲在服務器端的方法。 最初加載應用程序時，請加載所有產品。

為了限制需要在界面上顯示的數據，可以在ng-repeat內使用limitTO

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

Answer 3

無需再次調用loadProducts ，只需更新現有products數組

$scope.Update = function(id, $index) {
  //do update code here and when it succeeds, update the existing products array
  $scope.products[$index] = updatedProduct;
}

Answer 4

選項1：使用$index跟蹤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>

在控制器內部：

$scope.Update = function(index) {
  $scope.products[index].name = newValue; //Update Name of a particular Product
}

該版本將被填充到“視圖”中。

選項2：將產品作為參數傳遞給控制器功能Update 。

   <tr ng-repeat="p in products">
      <td>{{ p.id }}</td>
      <td>{{ p.name }} </td>
      <td><a ng-click="Update(p)"></a></td>
    </tr>

在控制器內部：

$scope.Update = function(product) {
  product.name = newName; //Update Name of a particular Product
}

Answer 5

傳遞屬性和索引以進行更新。 $ index可以獲取當前項目的索引。 另外，如果僅需要更新產品中的第二項，則可以選中$ 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;
    }

如何在Angular的ng-repeat中更新特定值？

問題描述

5 個解決方案

解決方案1
3 已采納 2016-12-27 12:53:31

解決方案2
1 2016-12-27 12:43:11

解決方案3
1 2016-12-27 12:46:02

解決方案4
1 2016-12-27 12:46:50

解決方案5
1 2016-12-27 12:51:15

如何在Angular的ng-repeat中更新特定值？

問題描述

5 個解決方案

解決方案1 3 已采納 2016-12-27 12:53:31

解決方案2 1 2016-12-27 12:43:11

解決方案3 1 2016-12-27 12:46:02

解決方案4 1 2016-12-27 12:46:50

解決方案5 1 2016-12-27 12:51:15

解決方案1
3 已采納 2016-12-27 12:53:31

解決方案2
1 2016-12-27 12:43:11

解決方案3
1 2016-12-27 12:46:02

解決方案4
1 2016-12-27 12:46:50

解決方案5
1 2016-12-27 12:51:15