AngularJS - 具有多种对象类型的ngRepeat [英] AngularJS - ngRepeat with multiple object types

问题描述

我有一个项目列表。一个项目可以是一些事情，让我们说清单是这样的：

  [userObject，vehicleObject，userObject，animalObject ，animalObject] 
  

现在我想使用ngRepeat指令呈现列表，该指令将使用根据对象的类型（多形态渲染）。可以这样做吗？

可能类似（ ng-use 是一个假设指令）：

 < ul> 
< li ng-repeat =项目中的项目> 
< img ng-use =item.type =='user'ng-src =item.src> 
< a ng-use =item.type =='vehicle'> {{item.link}}< / a> 
< span ng-use =item.type =='animal'> {{item.name}}< / span> 
< / li> 
< / ul> 
  

解决方案

  UL>项目中的
< li ng-repeat =项目ng-switch =item.type> 
< imgng-switch-when =userng-src =item.src> 
< a ng-switch-when =vehicle> {{item.link}}< / a> 
< span ng-switch-when =animal> {{item.name}}< / span> 
< / li> 
< / ul> 
  

API参考：

http://docs.angularjs.org/api/ng.directive:ngSwitch

I have a list of items. An item can be a number of things, let's say the list is something like so :

[userObject , vehicleObject , userObject , animalObject , animalObject]

Now I want to render the list with ngRepeat directive that will use a template according to the type of the object (Polymorphic rendering). can this be done?

maybe something like (ng-use is an hypothetically directive):

<ul>
    <li ng-repeat="item in items">
       <img ng-use="item.type == 'user'" ng-src="item.src">
       <a ng-use="item.type == 'vehicle'">{{item.link}}</a>
       <span ng-use="item.type == 'animal'">{{item.name}}</span>
    </li>
</ul>

解决方案

<ul>
    <li ng-repeat="item in items" ng-switch="item.type">
       <img ng-switch-when="user" ng-src="item.src">
       <a ng-switch-when="vehicle">{{item.link}}</a>
       <span ng-switch-when="animal">{{item.name}}</span>
    </li>
</ul>

API reference:
http://docs.angularjs.org/api/ng.directive:ngSwitch

这篇关于AngularJS - 具有多种对象类型的ngRepeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！