AngularJS动态更改ng-repeat指令的模板
发布时间:2020-12-17 17:55:32 所属栏目:安全 来源:网络整理
导读:是否可以更改模板ng-repeat用于动态呈现每个元素,例如从表/列表视图选择元素切换到仅显示该元素的备用视图? 我想要的是,在ng-repeat表/列表中选择一个元素后,只切换到所选元素的显示.但是我希望保持ng-repeat结构(过滤器,分页)到位,因为我希望能够一次一个
是否可以更改模板ng-repeat用于动态呈现每个元素,例如从表/列表视图选择元素切换到仅显示该元素的备用视图?
我想要的是,在ng-repeat表/列表中选择一个元素后,只切换到所选元素的显示.但是我希望保持ng-repeat结构(过滤器,分页)到位,因为我希望能够一次一个地浏览每个元素(左和右说)并且在任何时候返回到表/列表它的结构到位. 一旦选择了元素,使用新模板切换到新路线可能更容易,但是如何仅通过过滤后的项目保持导航,并在返回到该路线时恢复到ng-repeat的保存状态? 我希望我解释得那么好,谢谢你提前. 解决方法
您可以在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. UPDATE 在评论中,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> 而且是full Plunker demo. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |