当在 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