AngularJS 不刷新 ngRepeat 当更新数组时

当在 AngularJS 中使用 ngRepeat 指令来展示一个数组时,有时候我们需要更新这个数组中的某些元素。但是,如果我们只是简单地修改了数组中的元素,并没有重新分配新的数组,那么 ngRepeat 并不会自动刷新对应的视图,这可能会导致一些奇怪的行为。

问题描述

考虑下面的例子:

---- -------------- -----------------------
  ---- --------------- -- -------
    -- ---- --
  ------
  ------- -------------------------------
------

--------
--- --- - ----------------------- ----

------------------------ ---------------- -
  ------------ - ----- ---- -----

  ------------- - ---------- -
    -- -----------
    --------------- - ----
  --
---
---------

在这个例子中,我们展示了一个包含三个元素的数组,并且有一个按钮可以更新这个数组中的第二个元素。但是,当我们点击按钮时,视图并不会自动刷新,而是仍然展示原来的内容。

解决方案

要解决这个问题,我们需要告诉 AngularJS 在更新数组后重新渲染对应的视图。这可以通过调用 $scope.$apply() 方法来实现。具体地,在上面的例子中,我们可以将 update() 函数改为:

------------- - ---------- -
  -- -----------
  --------------- - ----
  -- -- --------- ------
  ----------------
--

现在,当我们点击按钮时,视图会自动更新以展示新的内容。

深入学习

上面的解决方案是比较简单和通用的,但是它并不涉及到太多关于 AngularJS 内部工作原理的细节。如果你想更深入地了解这个问题,以下是一些可能有用的资源:

  • The ngRepeat Directive:AngularJS 官方文档中关于 ngRepeat 的详细说明。
  • AngularJS 中的数据绑定:本文只是介绍了一个小问题,如果你想更全面、系统地学习 AngularJS 中的数据绑定机制,这篇文章可能会有所帮助。

总结

在 AngularJS 中使用 ngRepeat 展示数组时,如果需要更新数组中的元素,需要手动调用 $scope.$apply() 方法来触发视图的刷新。这个方法可以让 AngularJS 在下一个脏检查周期中重新渲染对应的视图。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/29225