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

所以我有一个获得所有的产品在我的API 代码：如何在Angular中更新ng-repeat中的特定值？

控制器

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();加载一切只有一个？

任何帮助将不胜感激。

来源

2016-12-27 FewFlyBy

什么是新数据，我的意思是你想要更新什么？ –

在从更新您的读取相同数据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="[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>

在这里，我增加了一个样本数据为你，当你点击一个upit我传递的索引值更新函数....通过使用此我重写名称属性...就像如果你有来自api的新数据，那么你也可以通过首先获取数据并像这样插入来使用它。

来源

2016-12-27 12:53:31

如果我有一个表ng-repeat，每个按钮都可以查看模态中的更多数据。然后在那里更新它。这个代码也能工作吗？ – FewFlyBy

您的意思是整个表格的单个按钮或每个表格行的按钮？如果每个行的按钮都有效，那么这个按钮可以工作 –

每行的按钮。该按钮有视图模式（p.id），然后模式内是更新按钮与id太更新（id） – FewFlyBy

不要更新每个项目调用loadProducts（）。由于角支撑Two-way data结合，无论您更新数据将一直保存在客户端。

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

一旦更新了所有内容，请提供一种方法将其存储在服务器端。加载所有产品，无论何时最初加载应用程序。

为了限制需要在界面上显示的数据，你可以使用limitTO内NG重复

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

来源

2016-12-27 12:43:11 Sajeetharan

一旦他这样做，我相信他不使用数组的对象本身，如果他做了期望的行为本来可以完成的，但一个新的实例，但双向数据绑定肯定是答案 –

无需再打电话loadProducts，只需更新现有products阵列

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

来源

2016-12-27 12:46:02

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

来源

2016-12-27 12:46:50

传递索引将不会工作，如果你是使用任何过滤器。 – Chetan

请检查，我增加了第二个选项。 –

传递财产和索引更新。 $ 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; 
    }

来源

2016-12-27 12:51:15

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

回答

相关问题