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

4

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

我想要的是,在选择ng-repeat表格/列表中的一个元素后,切换到仅显示所选元素的分页。但是我想保留ng-repeat结构(过滤器、分页),因为我希望能够逐个浏览每个元素(比如向左和向右),并且在任何时候都可以返回到具有其结构的表格/列表。

也许更容易的方法是一旦选择了一个元素就切换到新模板的新路由,但是如何只保持筛选后的项目导航,并在返回该路由时恢复ng-repeat的保存状态呢?

希望我已经解释得足够清楚,谢谢你的帮助。

1个回答

10
可以在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代码。

更新

在评论中,Ninja Pants澄清了最终目标是使用ng-include来包含模板。以下是更新后的代码片段,显示如何实现:

<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>

这里提供一个完整的 Plunker 演示


我甚至没有想到使用ng-switch,谢谢!所以我可以使用ng-switch与ng-include结合使用,无需任何问题地切换模板? - adamK
似乎是可能的。由于在jsFiddle上没有任何template.urls可用于工作,因此很难进行演示。我尝试使用jsFiddle标志URL作为我的模板URL,并且它有点起作用,所以我猜可以使用ng-includes - http://jsfiddle.net/brettdewoody/X3aAU/ - Brett DeWoody
这个是有效的,我创建了一个 Plunker 来尝试完整的实现 - http://plnkr.co/edit/WZBJJNCkwAJhPwAJrOZS?p=preview - Brett DeWoody
添加了另一个模板到上面,运行得很好。非常感谢! - adamK
很高兴你问这个问题,有趣的小实验。 - Brett DeWoody

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接