javascript - Angular 自定义过滤器问题

Question

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

Filter 是一个普通的 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，这意味着原始 items 数组正在被更改!

解决方案是对数组进行浅拷贝；而不是上面的第一行，执行:

var filtered = items.slice(0);