Angular.js更改了一个ng-repeat项目,导致所有其他项目上的过滤器运行

时间:2022-08-23 23:37:13

I'm still running into the same problem, filters and functions inside ng-repeat being called all the damn time.

我仍然遇到同样的问题,ng-repeat中的过滤器和函数被称为所有该死的时间。

Example here, http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview, anytime you change something on a single row, someFilter filter is called 1000 times.

这里的示例http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview,无论何时在单行上更改某些内容,someFilter过滤器都会被调用1000次。

Apparently it's because any change on a child scope bubbles up to its parent, causing $digest to run, causing all filters to run(https://*.com/a/15936362/301596). Is that right? How can I prevent it from happening in my particular case?

显然,这是因为子范围的任何更改都会冒泡到其父级,导致$ digest运行,导致所有过滤器运行(https://*.com/a/15936362/301596)。是对的吗?如何在我的特定情况下防止它发生?

How can I make it run only on the item that has changed?

如何才能使其仅在已更改的项目上运行?

In my actual use case the filter is called even when the change is not even on the items of ng-repeat, it's so pointless and it is actually causing performance problems..

在我的实际用例中,即使在ng-repeat的项目上没有更改,也会调用过滤器,它是如此毫无意义,实际上会导致性能问题。

// edit cleared all the unnecessary stuff from the plunker http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview

//编辑清除了来自探测器的所有不必要的东西http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview

1 个解决方案

#1


4  

This is just how Angular's dirty checking works. If you have an array of 500 items and the array changes, the filter must be reapplied to the entire array. And now you're wondering "why twice"?

这就是Angular的脏检查工作原理。如果您有500个项目的数组并且阵列发生更改,则必须将过滤器重新应用于整个阵列。现在你想知道“为什么两次”?

From another answer:

从另一个答案:

This is normal, angularjs uses a 'dirty-check' approach, so it need to call all the filters to see if exists any change. After this it detect that have a change on one variable(the one that you typed) and then it execute all filters again to detect if has other changes.

这是正常的,angularjs使用'脏检查'方法,因此需要调用所有过滤器以查看是否存在任何更改。在此之后,它检测到一个变量(您键入的变量)的变化,然后再次执行所有过滤器以检测是否有其他变化。

And the answer it references: How does data binding work in AngularJS?

它引用的答案:数据绑定如何在AngularJS中运行?

Edit: If you're really noticing sluggishness (which I'm not on an older Core 2 Duo PC), there are probably a number of creative ways you can get around it depending on what your UI is going to be.

编辑:如果你真的注意到迟钝(我不是在较旧的Core 2 Duo PC上),可能有很多创造性的方法可以解决它取决于你的用户界面将会是什么。

  1. You could put the row into edit mode while the user is editing the data to isolate the changes, and sync the model back up when the user gets out of edit mode
  2. 您可以在用户编辑数据以隔离更改时将行置于编辑模式,并在用户退出编辑模式时同步模型
  3. You could only update the model onblur instead of onkeypress using a directive, like this: http://jsfiddle.net/langdonx/djtQR/1/
  4. 您只能使用指令更新模型onblur而不是onkeypress,如下所示:http://jsfiddle.net/langdonx/djtQR/1/

#1


4  

This is just how Angular's dirty checking works. If you have an array of 500 items and the array changes, the filter must be reapplied to the entire array. And now you're wondering "why twice"?

这就是Angular的脏检查工作原理。如果您有500个项目的数组并且阵列发生更改,则必须将过滤器重新应用于整个阵列。现在你想知道“为什么两次”?

From another answer:

从另一个答案:

This is normal, angularjs uses a 'dirty-check' approach, so it need to call all the filters to see if exists any change. After this it detect that have a change on one variable(the one that you typed) and then it execute all filters again to detect if has other changes.

这是正常的,angularjs使用'脏检查'方法,因此需要调用所有过滤器以查看是否存在任何更改。在此之后,它检测到一个变量(您键入的变量)的变化,然后再次执行所有过滤器以检测是否有其他变化。

And the answer it references: How does data binding work in AngularJS?

它引用的答案:数据绑定如何在AngularJS中运行?

Edit: If you're really noticing sluggishness (which I'm not on an older Core 2 Duo PC), there are probably a number of creative ways you can get around it depending on what your UI is going to be.

编辑:如果你真的注意到迟钝(我不是在较旧的Core 2 Duo PC上),可能有很多创造性的方法可以解决它取决于你的用户界面将会是什么。

  1. You could put the row into edit mode while the user is editing the data to isolate the changes, and sync the model back up when the user gets out of edit mode
  2. 您可以在用户编辑数据以隔离更改时将行置于编辑模式,并在用户退出编辑模式时同步模型
  3. You could only update the model onblur instead of onkeypress using a directive, like this: http://jsfiddle.net/langdonx/djtQR/1/
  4. 您只能使用指令更新模型onblur而不是onkeypress,如下所示:http://jsfiddle.net/langdonx/djtQR/1/