AngularJS - ng重复多种对象类型

时间:2013-01-20 14:30:24

标签: javascript dom polymorphism angularjs rendering

我有一个项目列表。一个项目可以是很多东西,比如列表是这样的:

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

2 个答案:

答案 0 :(得分:31)

<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

答案 1 :(得分:0)

虽然这并没有使用ng-switch,但它确实解决了没有 type 字段的问题,@ DotNetHaggis指出了这一点。

applicants:{
applicant1:{
    .
    .
    applications:{
        application1:true,
        application3:true
    }
},
applicant2:{
    .
    .
    applications:{
        application2:true,
        application4:true
    }
}}

applications:{
application1:{
    .
    .
},
application2:{
    .
    .
},
application3:{
    .
    .
},
application4:{
    .
    .
}}