在角度不更新视图中嵌套的ng-repeats

时间:2014-03-07 12:10:50

标签: javascript angularjs angularjs-ng-repeat

我有一些嵌套的控制器,每个控制器都用ng-repeat调用。

底层项目能够通过ng-click事件删除它自己。此事件从数组中拼接项目。

在下面的plunkr中,如果删除第二个项目(item2),则数组将保留item1和item3,但视图会看到item1和item2。永远不会再次调用子控制器,并使用缓存的控制器。

如何手动强制刷新这些控制器?对我来说不应该有角度吗?

http://plnkr.co/edit/jDidC4anikwjZSLMWct6?p=preview

2 个答案:

答案 0 :(得分:3)

您目前正在按$index进行跟踪,但不会按照您希望的方式进行更新:

这是updated plunker

我做的唯一更改是在track by $indexpitem in items track by $index)中取出toplevel.html

<div ng-repeat="pitem in items" ng-include="" src="'mid-level.html'" ng-controller="midlevel">test</div>

修改

在确定track by $index中要更新的内容时,

$index将使用ng-repeat值作为相等性检查。所以这就是发生的事情:

  1. 设置完成后,我们有[i: 0, name: 'item1', i: 1, name: 'item2', i: 2, name: 'item3']
  2. item2被拼接
  3. track by $index发现存在更改,并检查数据中是否仍存在值$index0 1
  4. 他们这样做,所以不进行更新
  5. 但值$index的{​​{1}}不存在
  6. 因此,它已更新并删除

答案 1 :(得分:0)

是的,问题是您正在检查item.name,但是您在pitems.name中存储了更新的列表,因此如果您在mid.html中更新代码

{{item.name}} <span ng-click="delete(items, $index)">x</span>

{{pitem.name}} <span ng-click="delete(items, $index)">x</span>

这很好。