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

时间:2015-07-29 17:17:19

标签: angularjs

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

 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,
}

searchText - 是用户输入的文字。

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

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

1 个答案:

答案 0 :(得分: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>

我考虑的另一个选项是创建一个浅层副本的对象放在他们的子数组中,而没有引用回原始对象类型,但是直到我遇到内联绑定的性能问题,我更喜欢它的简单性。 / p>