Question

我有一系列项目使用ng-repeat显示在表格中。当您单击某个项目时，该项目将从服务器中提取，然后应使用更新的项目更新该表。

单击表格中的项目时获取更新项目的功能：

$scope.getUpdatedItem = function(item){
    itemService.getItem(item).then(
        function(updatedItem){
            item = updatedItem;
        },
        function(error){
            //Handle error
        }
    );
};

我正在使用以下内容显示项目：

<tr ng-repeat="item in myItems">

问题：表中的项目永远不会更新。

更新ng-repeat中项目的最佳方法是什么？我可以在ng-repeat中使用“追踪$ index”吗？或者我是否必须迭代myItems以找到我想要替换的项目？

更新

可能的解决方案是使用

item = updatedItem,

使用：

var index = $scope.myItems.indexOf(item);
$scope.myItems[index] = updateItem;

但是，我认为应该采用“更清洁”的方式来做到这一点。

Answer 1

如果我理解你的问题

可能会有这样的工作吗？

<!-- template code -->
<table>
    ...
    <tr ng-repeat="(index, item) in items">
        <td>{{item.name}}</td>
        <td>
             {{item.detail}}
             <button ng-if="!item.detail" ng-click="loadItem(index)">
        </td>
    </tr>
</table>

// Controller Code
$scope.items = [...]
$scope.loadItem = function(index){
    itemService.getItemDetail($scope.items[index]).then(function(itemDetail){
        $scope.items[index].detail = itemDetail;
    });
};

Answer 2

我刚刚在这个问题上花了好几个小时。我无法使用@eladcon中的$index解决方案，因为我的ng-repeat也使用了过滤器，如果行/项被过滤，则索引不正确。

我以为我能够做到这一点：

$filter('filter')($scope.rows, {id: 1})[0] = newItem;

但这不起作用。

我最终迭代了数组，直到找到匹配，然后使用迭代中的$index（而不是ng-repeat）将数组项设置为新项。

// i'm looking to replace/update where id = 1
angular.forEach($scope.rows, function(row, $index) {
  if (row.id === 1) {
    $scope.rows[$index] = newItem;
  }
})

见这里： https://codepen.io/anon/pen/NpVwoq?editors=0011

如何替换使用ng-repeat显示的数组中的对象？

2 个答案: