我无法确定如何使用过滤器从ng-repeat传递正确的索引号。我使用模态窗口编辑表格中的行。问题是我依靠索引号来进行REST调用并为我的编辑模式窗口获取正确的数据。
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
调用。
但过滤器改变了索引的顺序,我似乎无法找到一个好的选择。
有什么建议吗?
解决方案:
传递对象/项而不是索引似乎可以完成工作:
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来编辑/删除正确的项目。这当然需要与该项目相关联的ID。正如评论中所指出的,ID可以在许多情况下派上用场。
Thx的帮助!
答案 0 :(得分:2)
更为安全的替代方案是,为您的对象myItem.id
引入unqiue id,并将其用作要在http请求中加载的资源的标识符。因此,您不必依赖$index
,这可能会导致一些问题,如Tomek Sulkowski所指出的(并且行为可能会随着不同的角度版本而改变)。
答案 1 :(得分:1)
过滤器弄乱索引是一个常见问题。
你可以通过实现这样的逻辑来绕过它:
touchesEnded: