AngularJS 动态更改 ng-repeat 指令的模板

Question

是否可以更改 ng-repeat 用于动态呈现每个元素的模板，例如在选择元素时从表格/列表视图切换到仅显示该元素的替代视图？

我想要的是，在选择 ng-repeat 表/列表中的元素后，切换到仅显示所选元素。但是我想保留ng-repeat 结构（过滤器，分页），因为我希望能够一次导航一个元素（左右说）并在任何时候返回表/列表它的结构到位。

一旦选择了一个元素，使用新模板切换到新路由可能会更容易，但是我如何才能仅通过过滤的项目保持导航并在返回时恢复到 ng-repeat 的保存状态路线？

我希望我已经解释得很好，提前谢谢你。

Answer 1

您可以在ng-repeat 指令中使用ng-switch 指令。这是一个基本示例：

<ul>
  <li ng-repeat="color in colors" ng-switch on="color.value" >
    <span ng-switch-when="orange" style="background-color:{{color.value}};">{{color.name}}</span>
    <span ng-switch-default>{{color.name}}</span>
  </li>
</ul>

完整的jsFiddle。

更新

在 cmets Ninja Pants 中澄清了最终目标是使用 ng-include 来包含模板。以下是更新后的 sn-p，展示了如何做到这一点：

<ul>
  <li ng-repeat="color in colors" ng-switch on="color.value" >
    <span ng-switch-when="orange" ng-include src="'template.html'"></span>
    <span ng-switch-when="indigo" ng-include src="'template2.html'"></span>
    <span ng-switch-default>{{color.name}}</span>
  </li>
</ul>

还有一个full Plunker demo。