Question

使用Angular执行GET请求并获得响应时，会有一个包含名为type的属性的对象列表。根据这种类型（有时还有其他额外的检查），我可以预测对象的其余属性。一个例子：

{ "type": "simpleObject", "name": "A Simple Object" }
{ "type": "objectWithInteger", "name": "Another Object", "number": 10 }

因此，当迭代这些对象的列表时，我如何应用预定义的模板以便为每个不同的对象提供足够的HTML？

例如，当类型为"simpleObject"时，我们会使用simple-object.html模板。当它是"objectWithInteger"时，object-with-integer.html部分。

可以这样做吗？也许用component？我对Angular不是很有经验，据我所知，这不是一种常见的情况。

所以，基本上我希望能够做到这样的事情：

<ul>
  <li ng-repeat="object in objects">
    {{ appropriate_template(object) }}
  </li>
</<ul>

Answer 1

一种解决方案是使用ngInclude：

为这样的每种类型创建模板文件

<ul>
  <li ng-repeat="object in objects" ng-include="'/path/to/templates/'+object.type+'.html'">
  </li>
</<ul>

然后有像simpleObject.html这样的文件，你有相应的HTML，例如objectWithInteger.html：

Name: {{object.name}}, Number: {{object.number}}

Answer 2

结合使用ng-switch和ng-include指令。

  <div ng-repeat="object in objects">
    <div ng-switch="object.type">
      <div ng-switch-when="simpleObject">
        <ng-include src="'simpleObject.html'"></ng-include>
      </div>
      <div ng-switch-when="objectWithInteger">
        <ng-include src="'objectWithInteger.html'"></ng-include>
      </div>
    </div>
  </div>

这是一个有效的plunk

AngularJS模板取决于属性

2 个答案: