如何在 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()。由于 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 2

无需再次调用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 3

选项 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 4

通过属性和索引进行更新。 $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;
    }

Answer 5

从更新中调用 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 时，我将索引值传递给更新函数....通过使用它我覆盖了名称属性...就像如果您有来自 api 的新数据，那么您也可以通过首先获取数据并像这样插入来使用它。

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

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

javascript

angularjs

ng-repeat