Angular ng-repeat 过滤器传递了错误的索引

Question

我无法弄清楚如何使用过滤器从 ng-repeat 传递正确的索引号。我正在使用 modal-window 来编辑 table 中的行。问题是我依靠索引号进行 REST 调用并为我的编辑模式 window.

获取正确的数据

ng-repeat 代码：

    <tr ng-repeat="myItem in myItems | filter:{Status :'!Completed'}">
      <td data-title="Title">{{myItem.Title}}</td>
      <td data-title="Category">{{myItem.Category}}</td>
      <td data-title="Priority">{{myItem.Priority}}</td>
      <td data-title="Due Date">{{myItem.DueDate}}</td>
      <td data-title="Due Date">{{myItem.Status}}</td>
      <td data-title="Due Date">{{myItem.AssignedTo}}</td>
      <td data-title="Edit"><span class="mdi-content-create editIcon" data-ng-click="openEditModal($index)" style="cursor:pointer"></span></td>
      <td data-title="Delete"><span style="  margin-left: 10px;" class="mdi-content-clear editIcon" ng-confirm-click="Are you sure you want to delete this request?" confirmed-click="deleteItem($index)" style="cursor:pointer"></span></td>
    </tr>

将索引传递给模态的代码：

$scope.openEditModal = function(index) {
var modalInstance = $modal.open({
    controller: 'modalCtrl',
    templateUrl: 'https://xxxx/App/editModal.html',
    windowClass: "editModal",
    resolve: {
        index: function() {
            return index;
            console.log(index);
        }
    }
});
}

索引号需要获取当前项目的id，才能进行正确的$http get调用。

但是过滤器改变了索引的顺序，我似乎找不到好的选择。

有什么建议吗？

解法：

传递 object/item 而不是索引似乎可以完成这项工作：

HTML:

data-ng-click="openEditModal(myItem)

JS:

$scope.openEditModal = function(myItem) {
    var idx = $scope.myItems.indexOf(myItem);
    var modalInstance = $modal.open({
        controller: 'modalCtrl',
        templateUrl: 'https://xxxx/App/editModal.html',
        windowClass: "editModal",
        resolve: {
            index: function() {
                return idx

            }
        }
    });
}

我现在可以使用 ID edit/delete 正确的项目。这当然需要与项目关联的 ID。正如评论中指出的那样，ID 在许多情况下都可以派上用场。

感谢您的帮助！

Answer 1

过滤器干扰索引是一个常见问题。

您可以通过实现这样的逻辑来绕过它：

<tr ng-repeat="myItem in myItems" ng-show="myItem.Status !== 'Completed'">
  <td data-title="Title">{{myItem.Title}}</td>
  <td data-title="Category">{{myItem.Category}}</td>
  <td data-title="Priority">{{myItem.Priority}}</td>
  <td data-title="Due Date">{{myItem.DueDate}}</td>
  <td data-title="Due Date">{{myItem.Status}}</td>
  <td data-title="Due Date">{{myItem.AssignedTo}}</td>
  <td data-title="Edit"><span class="mdi-content-create editIcon" data-ng-click="openEditModal($index)" style="cursor:pointer"></span></td>
  <td data-title="Delete"><span style="  margin-left: 10px;" class="mdi-content-clear editIcon" ng-confirm-click="Are you sure you want to delete this request?" confirmed-click="deleteItem($index)" style="cursor:pointer"></span></td>
</tr>

Answer 2

一个更安全的替代方法是，为您的对象引入一个独特的 ID myItem.id，并将其用作在您的 http 请求中加载哪个资源的标识符.所以你不必依赖 $index，正如 Tomek Sulkowski 指出的那样，这可能会导致一些问题（并且行为可能会随着不同的 angular 版本而改变）。

Angular ng-repeat 过滤器传递了错误的索引

Angular ng-repeat filter passing wrong index

javascript

angularjs

angularjs-ng-repeat

bootstrap-modal