проблема углового пользовательского фильтра

Question

Я пытаюсь реализовать пользовательский фильтр в угловых js. Идея заключается в том, что пользователь может добавлять теги и каждый раз, когда запускается фильтр.

Фильтр является простым JavaScript Object, в основном это выглядит следующим образом:

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

Проблема заключается в синергии следующего 2-х линий:

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

Вы видите splice изменяет массив; но массив уже указывает на оригинал items, а это значит, что исходный массив элементов изменяется!

Решение состоит в том, чтобы сделать мелкую копию массива; вместо первой строки выше:

var filtered = items.slice(0);