AngularJS - 使用ngRepeat处理多个对象类型

Question

我有一个项目列表，一个项目可以是许多东西，我们假设列表长这样：

[userObject , vehicleObject , userObject , animalObject , animalObject]

现在我想使用ngRepeat指令来渲染列表，根据对象的类型使用相应的模板（多态渲染）。这个可以做到吗？

可能会像这样（ng-use是一个假设性的指令）：

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

- Shlomi Schwartz

Answer 1

<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 参考文档：
http://docs.angularjs.org/api/ng.directive:ngSwitch

- Umur Kontacı

---

还有一件事...你能合并案例吗，意思是类似于 ng-switch-when="'user'||'animal'"？ - Shlomi Schwartz

不，你不能这样做。顺便说一下，在使用 ng-switch-when 时，不应该使用额外的 ''（与我的第一个答案相反），而且 Angular 将属性值处理为字符串。以下是相关的源代码：https://github.com/angular/angular.js/blob/master/src/ng/directive/ngSwitch.js - Umur Kontacı

谢谢你的解释，非常详细。 - Shlomi Schwartz

这取决于项目对象是否具有“类型”字段...如果您的对象没有该字段怎么办？ - dotnethaggis

Answer 2

虽然这个方法没有使用ng-switch，但它解决了没有"type"字段的问题，正如@DotNetHaggis所指出的那样。

<div ng-repeat="field in fields">
    <div ng-if="field.user !== undefined">user info</div>
    <div ng-if="field.vehicle !== undefined">vehicle info</div>
    <div ng-if="field.animal !== undefined">animal info</div>
</div>

- deejbee