AngularJS - ngRepeat与多个对象类型 [英] AngularJS - ngRepeat with multiple object types

问题描述

我有一个项目清单。一个项目可以是一些东西，比方说，名单是像这样：

  [userObject，vehicleObject，userObject，animalObject，animalObject]
 

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

也许像（ NG-使用是假设指令）：

 ＆LT; UL＆GT;
    ＆LT;李NG重复=中的项项＆GT;
       ＆LT; IMG NG使用=项目。形式=='用户'NG-SRC =item.src＆GT;
       ＆LT;一个NG使用=项目。形式=='车'＆GT; {{item.link}}＆LT; / A＆GT;
       ＆LT;跨度NG使用=项目。形式=='动物'＆GT; {{item.name}}＆LT; / SPAN＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

 ＆LT; UL＆GT;
    ＆LT;李NG重复=中的项项NG-开关=项目。形式＆GT;
       ＆LT; IMG NG-开关时=用户NG-SRC =item.src＆GT;
       ＆LT;一个NG-开关时=车辆＆GT; {{item.link}}＆LT; / A＆GT;
       ＆LT;跨度NG-开关时=动物＆GT; {{item.name}}＆LT; / SPAN＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

API参考：结果
<一href=\"http://docs.angularjs.org/api/ng.directive:ngSwitch\">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屋！