angularjs - 当我尝试使用时，angularJS 中超出了最大调用堆栈大小 |过滤器 :searchText

Question

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

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

交易 是包含数据的数组，如下所示:

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

搜索文字 - 是用户输入的文本。

当用户输入文本时它必须过滤数据，但它不起作用，因为它抛出异常(超出最大调用堆栈大小)。如果确定要编写要用于过滤数据的字段，它通常可以工作。

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

(这种关系比这个复杂一点，但这是它的核心)。

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

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

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