在使用 AngularJS 中的 ng-repeat 指令时，我们可能会遇到这样一个问题：当我们改变了数组的 length 属性时，ng-repeat 并未重新渲染模板。这是因为 AngularJS 并没有监听数组 length 属性的变化。本文将介绍这个问题的原因以及解决方法。
问题原因
在 JavaScript 中，当我们改变一个数组的 length 属性时，数组会被截断或者扩展到指定的长度。但是，这并不会触发数组的更新事件，因为数组并没有被真正改变。例如，当我们将一个长度为 3 的数组的 length 属性改为 2 时，数组的最后一个元素会被删除，但是数组本身并没有被改变。
在 AngularJS 中，ng-repeat 指令是通过监听数组元素的变化来实现重新渲染模板的。当数组的元素被增加、删除或者修改时，ng-repeat 会重新渲染模板。但是，当数组的 length 属性被改变时，ng-repeat 并不会重新渲染模板，因为它并没有监听数组 length 属性的变化。
解决方法
为了解决这个问题，我们需要手动触发数组的更新事件，告诉 AngularJS 数组已经被改变了。我们可以使用 $apply 方法来实现这个目的。$apply 方法会将我们传递给它的函数包装在一个 $digest 循环中，这个循环会检查所有的数据绑定，并更新视图。
下面是一个示例代码，演示了如何在改变数组的 length 属性时触发更新事件：
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<button ng-click="removeItem()">Remove Item</button>
</div>-- -------------------- ---- -------
----------------------- ---
--------------------- ---------------- -
------------ - ------ --- ----- --- ----- ----
----------------- - ---------- -
------------------- - ------------------- - --
---------------- -- --------
--
---在这个示例中，我们创建了一个包含三个元素的数组 items，并将它们显示在一个列表中。我们还创建了一个按钮，点击它会将数组的 length 属性减一，并手动触发更新事件。
结论
在使用 AngularJS 中的 ng-repeat 指令时，我们需要注意数组的 length 属性是否被改变。如果我们需要改变数组的 length 属性，我们需要手动触发更新事件，告诉 AngularJS 数组已经被改变了。这可以通过调用 $apply 方法来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6767787d98e3e1ab1a782e43