Question

我正在尝试在角度js中实现自定义过滤器。这个想法是用户可以添加一些标签，每次调用过滤器。

过滤器是一个简单的javascript对象，基本上它看起来像这样：

var filter = {color:'blue', length: 15};

项目是对象数组。

app.filter('filterByTags', function () {
    return function (items, filter) {
        debugger;
        if (!isEmpty(filter)) {
            var filtered = items;
            for (var prop in filter) {
                if (filter.hasOwnProperty(prop)) {
                    for (var i = 0; i < filtered.length; i++) {
                        if (filtered[i][prop] !== filter[prop]) {
                            filtered.splice(filtered.indexOf(filtered[i]), 1);
                        }
                    }
                }
            }
            alert('Return filtered items');
            return filtered;
        } else {
            alert('Original items ');
            return items;
        }
    };
});

因此，如果我添加标签时工作正常，但当我删除此标签时，我应该获得初始项目列表，但我已经过滤了列表。

所以例如最初我有一个包含5个项目的列表，当我点击某个标签时，我应该得到4个项目。但是当我删除这个标签时，我应该再次获得5件物品，但我仍然可以获得4件物品。

我认为这是因为在这行代码中：

return function (items, filter) {

当过滤器第二次调用时，项目已经过滤并返回之前的列表。任何想法如何解决它？

Answer 1

问题在于以下两条线的协同作用：

var filtered = items;
...
filtered.splice(...);

您看到splice改变了数组;但是数组已经指向原始items，这意味着原始项数组正在被更改！

解决方案是制作数组的浅表副本;而不是上面的第一行，请执行：

var filtered = items.slice(0);

角度定制过滤器问题

1 个答案: