javascript - 如何使用 angularjs 呈现需要不同模板(具有不同变量)的混合 json 结果

Question

我想知道当我的响应包含许多不同类型的对象并且看起来像这样时，最佳做法是什么:

[
{"nodeClass":"Entity", "text":"foo","entityfield":"booz"},
{"nodeClass":"User","username":"bar","userfield":"baz"}
]

我为所有这些设置了不同的模板:

对于实体:

<div class="{{nodeClass}} capsule">{{entity.text}}:{{entity.entityfield}}</div>

对于用户:

<div class="{{nodeClass}} capsule">{{user.username}}:{{user.userfield}}</div>

您将如何构建代码以及使用哪些 angularjs 元素(ng-repeat 等)根据“nodeClass”的值(重新)使用正确的模板。请记住，我不想制作新的条件模板，除非它是唯一的解决方案。

编辑:我发现了这些方法:http://onehungrymind.com/angularjs-dynamic-templates/和 if else statement in AngularJS templates和 Dynamically displaying template in ng-repeat directive in AngularJS?但它们与我的要求完全不同。特别是最后一个是最接近我想要的，但我的模板通常有不同的变量名..

谢谢

Answer 1

一种方法是使用动态生成的 ng-include url

HTML

  <div ng-repeat="item in data">
    <div ng-include="getContentUrl(item.nodeClass)"></div>
  </div>

模板

  <script type="text/ng-template" id="partials/Entity.html">
    <h3>Entity Template , text= {{item.text}}</h3>
  </script>
  <script type="text/ng-template" id="partials/User.html">
    <h3>User Template , username ={{item.username}}</h3>
  </script>

JS

app.controller('MainCtrl', function($scope) {
  $scope.data=[{"nodeClass":"Entity", "text":"foo"},{"nodeClass":"User","username":"bar"}];
  $scope.getContentUrl = function(nodeClass){
    return 'partials/'+nodeClass +'.html';
  }
});

DEMO