ng-repeat 和 ng-switch 不适用于同一元素答案

【问题标题】：ng-repeat and ng-switch doesn't work on same elementng-repeat 和 ng-switch 不适用于同一元素
【发布时间】：2014-10-29 19:24:52
【问题描述】：

$scope.mode = "test"
$scope.array = ['test1', 'test2', 'test3']

HTML

<div ng-switch on="mode">
    <div ng-repeat="item in array" ng-switch-when="test">
        Test {{item}}
    </div>
</div>

当我执行上述操作时，我得到的输出是

Test Test Test

它似乎无法访问项目。如果我删除 ng-switch-when 那么它工作正常。

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat ng-switch

【解决方案1】：

这是因为ng-switch 创建了一个子作用域，同样适用于 ng-repeat。 ng-repeat 以 1000 和 ng-switch 在 800 的优先级运行。因此，ng-repeat 在每个重复的 div 元素上创建的子作用域被ng-switch 覆盖，因此该元素上分配的ng-repeat 子作用域最终消失了。一种可能的方法是将您的 ng-switch 包装在 ng-repeat 之外，因为您无论如何都不想为每个重复元素评估 ng-switch 表达式。这是1.2版本。

现在从 Angular 的 1.3.x 版本开始，ng-switch 的优先级已经修改为 1200 并且 ng-repeat 保持在 1000，所以 ng-repeated范围将占上风，因为它现在的优先级较低，并且在这种情况下会起作用。

Plnkr

【讨论】：

谢谢。这是一个很好的答案。希望有一个调试器可以帮助我可视化范围，以防将来遇到类似问题。
@allenylzhou 升级到最新版本的 Angular，你应该会很好。