AngularJS 中的 ng-repeat 指令可以方便地循环渲染数据列表，但是在某些情况下，我们需要手动刷新该指令以更新视图。本文将介绍如何使用不同的方法来刷新 ng-repeat。
方法一：更改数组引用
每当数组发生变化时，ng-repeat 指令将自动更新视图。因此，最简单的方法就是更改数组的引用，例如：
$scope.items = []; // 初始化一个空数组
// 添加新的数据项到数组中
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.items = $scope.items.slice(0); // 更改数组引用以刷新 ng-repeat
};这种方法虽然简单易懂，但是可能会导致性能问题，因为每次更改数组引用都会触发视图更新。
方法二：使用 $scope.$apply()
$scope.$apply() 方法可以手动触发视图更新。注意，在控制器之外的代码（例如异步回调函数）中调用 $scope.$apply() 可能会抛出异常，因为它只能在 AngularJS 的上下文中运行。
$scope.items = [];
// 添加新的数据项到数组中
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.$apply(); // 手动刷新 ng-repeat
};这种方法比更改数组引用更高效，因为它不会触发额外的视图更新。但是要注意避免在错误的上下文中调用 $scope.$apply()。
方法三：使用 $timeout
$timeout 服务可以让指令先完成当前的渲染周期，然后在下一个周期中刷新指令。这种方法通常比直接调用 $scope.$apply() 更安全，因为它可以避免在错误的上下文中触发视图更新。
-- -------------------- ---- -------
------------ - ---
-- -----------
-------------- - -------------- -
------------------------
------------------- -
-- ----------- ---------
---
--这种方法在性能和可靠性方面都表现良好，因为它利用了 AngularJS 的自动化机制，同时还可以避免在错误的上下文中触发视图更新。
总结
AngularJS 中的 ng-repeat 指令提供了一种简单的方式来渲染数据列表。要刷新该指令，可以使用更改数组引用、$scope.$apply() 或 $timeout 等方法。选择适当的方法可以提高代码的效率和可靠性。
示例代码：https://codepen.io/chatgpt/pen/pobXvEv
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28644