Maksymalny rozmiar stosu połączeń przekroczony w angularJS, gdy próbuję użyć | filter: searchText

Question

Próbuję filtrować dane za pomocą |filter w dyrektywie ng-repeat.

ng-repeat="item in transactions |filter:searchText" 

transakcje jest tablica z danymi, które wygląda następująco:

{ 
$$hashKey: "object:666", 
amount: -50, 
card: "3158", 
catId: 0, 
dateTime: {month: 2, value: "2015-02-23T14:00:00"} 
details: "blabla", 
id: 2830, 
} 

searchText - tekst który jest wprowadzany przez użytkownika.

Ma filtrować dane, gdy użytkownik wprowadza tekst, ale nie działa, ponieważ zgłasza wyjątek (przekroczono maksymalny rozmiar stosu wywołań). Zwykle działa, jeśli zdecydowanie napiszesz, jakiego rodzaju pola chcesz użyć do filtrowania danych.

ng-repeat="item in transactions |filter:{amount:searchText}" 

Answer 1

Miałem ten sam problem z bardzo prostym filtrem, ale filtrowałem na tablicy obiektów, które miały kołowy odnośnik. Nie robiłem żadnych wywołań funkcji na filtrze - był to tylko wbudowany filtr na prostym łańcuchu.

Miałem dwie listy obiektów o relacji wiele do wielu, a po załadowaniu ich z $ resouce ustawiłem je dla każdego z właściwości, która była tablicą wszystkich obiektów z drugiej listy, z którą mieli związek. Miałem listę zadań, które śledzą własną listę zadań i listę zadań z własną podlistą zadań.

for (let job of service.jobs) 
{ 
    job.tasks = service.tasks.filter(t => t.jobid == job.id); 
} 

for (let task of service.tasks) 
{ 
    task.jobs = service.jobs.filter(j => j.taskid == task.id); 
} 

(Związek ten był nieco bardziej złożony, ale to było jego serce).

Próbowałem zapisać cykle, wiążąc je z góry tylko raz, a nie z każdym przetrawieniem na stronie, ale utworzyłem okrągłą pętlę, która spowodowała problem tylko wtedy, gdy próbowałem je odfiltrować. Prawdopodobnie mogłem ograniczyć to do filtrowania na polach innych niż "zadania", ale tak naprawdę też chcę je przejrzeć. Zmieniłem go tak, aby widok po prostu wywoływał funkcję przeciągania powiązanych obiektów w linii w szablonie.

<div ng-repeat="job in service.jobs | filter:jobFilterText"> <-- BOOM 
    <div ng-repeat="task in service.getTasksForJob(job.id)"> 
     {{ task.name }} 
    </div> 
</div> 

Drugi wariant I uważane było stworzenie płytką kopię obiektów, aby umieścić w swoich sub-macierzy bez odniesienia z powrotem do oryginalnego typów obiektów, ale dopóki nie uderzył problem wydajności z inline wiążący wolę jego prostota.