Javascript 如何在ng repeat in Angular中更新特定值？

因此，我有一个代码可以获取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>

身份证件
名称
行动
{{p.id}}
{{p.name}}

虽然我加载了大量数据，但代码仍在工作，每当我更新单个项目时，整个数据都将再次加载

是否有一种方法，例如，我更新了一个项目，并且它将是唯一一个被加载的项目，而不是

loadProducts（）加载所有内容

任何帮助都将不胜感激。
更新每个项目时不要调用loadProducts（）。由于angular支持绑定，因此无论何时更新数据，它都将保留在客户端

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

一旦所有内容都更新了，就提供一种将其存储在服务器端的方法。只要最初加载应用程序，就加载所有产品

为了限制需要在界面上显示的数据，您可以在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>


{{p.id}}
{{p.name}}
更新每个项目时不要调用loadProducts（）。由于angular支持绑定，因此无论何时更新数据，它都将保留在客户端

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

一旦所有内容都更新了，就提供一种将其存储在服务器端的方法。只要最初加载应用程序，就加载所有产品

为了限制需要在界面上显示的数据，您可以在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>


{{p.id}}
{{p.name}}
无需再次调用
loadProducts
，只需更新现有的
产品
阵列即可

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

无需再次调用
loadProducts
，只需更新现有的
products
数组即可

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

备选案文1：
使用
$index
跟踪ng重复的索引

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

此版本将填充到视图中

备选案文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>

备选案文1：
使用
$index
跟踪ng重复的索引

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

此版本将填充到视图中

备选案文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>

传递属性和索引以进行更新$索引您可以获取当前项目索引。此外，如果只需要更新产品中的第二项，则可以选中$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;
    }


{{p.id}}
{{p.name}}
$scope.Update=函数（id，索引）{
$scope.products[索引]=更新的产品；
}
传递属性和索引以进行更新$索引您可以获取当前项目索引。此外，如果只需要更新产品中的第二项，则可以选中$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;
    }


{{p.id}}
{{p.name}}
$scope.Update=函数（id，索引）{
$scope.products[索引]=更新的产品；
}
当从更新中调用loadProducts时，您将获取相同的数据……因此您无需再次调用它……仅当您希望基于某个id或某个内容获取新数据时，您才需要它……查看下面的代码如何用索引值替换现有数组数据


var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.products=[
{“id”：1，“name”：“a”}，
{“id”：2，“name”：“b”}，
{“id”：3，“name”：“c”}，
{“id”：4，“name”：“d”}，
];
$scope.Update=函数（id，索引）{
$scope.products[index].name=“h”；
}
});

安古拉斯普朗克
文件。写（“”）；
身份证件
名称
行动
{{p.id}}
{{p.name}}
upit
当从更新中调用loadProducts时，您将获取相同的数据……因此您无需再次调用它……仅当您希望基于某个id或某个内容获取新数据时，您才需要它……查看下面的代码如何用索引值替换现有数组数据


var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.products=[
{“id”：1，“name”：“a”}，
{“id”：2，“name”：“b”}，
{“id”：3，“name”：“c”}，
{“id”：4，“name”：“d”}，
];
$scope.Update=函数（id，索引）{
$scope.products[index].name=“h”；
}
});

安古拉斯普朗克
文件。写（“”）；
身份证件
名称
行动
{{p.id}}
{{p.name}}
upit
什么是新数据，我的意思是你想更新什么？什么是新数据，我的意思是你想更新什么？一旦他这样做了，我相信他没有使用数组的对象本身，如果他做了预期的行为就会完成，但是一个新的实例，但是双向数据绑定肯定是答案一旦他这么做了，我相信他没有使用数组的对象本身，如果他这样做了，预期的行为就会完成，但是一个新的实例，但是双向数据绑定肯定是答案，如果你使用任何过滤器，传递索引将不起作用。请检查，我添加了第二个选项。如果您正在使用任何筛选器，传递索引将不起作用。请检查，我添加了第二个选项。如果我有一个表，每个表都有一个按钮，以查看模式中的更多数据，该怎么办。然后在那里更新它。这个代码也可以吗？你是指整个表格的单个按钮还是每个表格行的一个按钮？如果它的按钮用于每一行，那么它将用于每一行的sureButton。按钮有viewmodal（p.id），然后在模式内部是id为too update（id）的更新按钮Uhm，代码段是相同的？您没有看到upit的按钮吗？如果我有一个表ng，每个表都有一个按钮，以查看模式中的更多数据，该怎么办。然后在那里更新它。这个代码也可以吗？你是指整个表格的单个按钮还是每个表格行的一个按钮？如果它的按钮用于每一行，那么它将用于每一行的sureButton。该按钮具有viewmodal（p.id），然后在该模式内是id为too update（id）的更新按钮Uhm，代码段是相同的？您没有看到upit的按钮吗？