当我尝试使用|时,angularJS中超出了最大调用堆栈大小 过滤:SEARCHTEXT

Question

我尝试|filter在ng-repeat指令中使用过滤数据.

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

transactions是包含数据的数组,如下所示:

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

searchText - 是用户输入的文本.

它必须在用户输入文本时过滤数据,但它不起作用,因为它抛出异常(超出最大调用堆栈大小).如果肯定要写出要用于过滤数据的字段类型,通常会起作用.

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

Answer 1

我使用一个非常简单的过滤器也遇到了同样的问题，但我正在过滤具有循环引用的对象数组。我没有对过滤器进行任何函数调用 - 它只是简单字符串上的内置过滤器。

我有两个具有多对多关系的对象列表，一旦从 $resouce 加载它们，我就为它们分别设置了一个属性，该属性是另一个列表中与它们有关系的所有对象的数组。我有一个跟踪自己的任务列表的作业列表，以及一个带有自己的作业子列表的任务列表。

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);
}

（这种关系比这更复杂一些，但这就是它的核心）。

我试图通过将它们预先关联一次而不是整个页面的每个摘要来节省循环，但它创建了一个循环，只有在我尝试过滤它们时才会引起问题。我可能可以将其限制为过滤非“任务”字段，但实际上我也想仔细查看它们。我对其进行了更改，以便视图仅调用函数来将相关对象内联到模板中。

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

我考虑的另一个选择是创建对象的浅表副本以放入其子数组中，而不引用回原始对象类型，但直到我遇到内联绑定的性能问题之前，我更喜欢它的简单性。