过滤后从列表中删除项目 [英] Remove item from list after filtering

问题描述

我有以下问题:

我创建了一个列表，允许用户从列表中删除一个项目，如下所示:

I've create a list that allow the user to delete an item from list, as following:

当用户点击垃圾桶图标时，项目会被正常删除.问题在于用户何时使用顶部的过滤器.

When user click on trash icon, the item is removed normally. The problem is when the user uses the filter on top.

在这种情况下，如果我删除数字 6565(原始列表中的索引 4，过滤列表中的索引 1)，则删除的项目位于原始列表的索引 1 上，导致删除编号为 #564456 的寄存器

In that case, if I delete the number 6565 (index 4 in original list, 1 on filtered list), the item deleted is on index 1 on original list, resulting on delete the register with number #564456

这是我的点击删除调用:

This is my delete call on click:

 $scope.deleteOwn = function (uuid) {
    console.log(uuid);
    var coupon = $scope.ownsCoupons[uuid];
    Coupon.delete({'id' : coupon.uuid}, function () {
        $scope.ownsCoupons.splice(uuid, 1);
    });
}

这是我的 html 模板:

And this is my html template:

<td><a href="" ><i class="icon-trash" ng-click="deleteOwn($index)"></i></a></td>

我也尝试使用代码:$scope.ownsCoupons.splice(coupon, 1);没有成功.

I also try to use the code: $scope.ownsCoupons.splice(coupon, 1);without success.

有人知道怎么解决吗?

我使用以下参考进行编码:AngularJS 如何删除范围内的项目

I've coded using the following reference: AngularJS How to remove an Item from scope

我为此创建了一个 Plunker:http://plnkr.co/edit/Fhxp6uZyTJCY05CAQ7yA?p=预览

I've created a Plunker to this: http://plnkr.co/edit/Fhxp6uZyTJCY05CAQ7yA?p=preview

推荐答案

正如@pkozlowski.opensource 提到的，你不能依赖 $index 以这种方式识别数组中的项目.我将进行以下更改:

As mentioned by @pkozlowski.opensource, you can't depend on $index to identify an item in an array in this way. I would make the following changes:

HTML:

<td><a ng-click="deleteWish(coupon)"><i class="icon-trash"></i></a></td>

JS:

$scope.deleteWish = function (coupon) {
    var index = $scope.coupons.indexOf(coupon);
    if (index != -1) {
        $scope.coupons.splice(index, 1);
    }
}

这是一个有效的 Plunker:http://plnkr.co/edit/b0b2cYGsM5wtw8hIrQB5?p=preview

Here is a working Plunker: http://plnkr.co/edit/b0b2cYGsM5wtw8hIrQB5?p=preview

这篇关于过滤后从列表中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！