如何使用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等）根据“nodelclass”的值使用正确的模板。请记住，我不想创建一个新的条件模板，除非它是唯一的解决方案。

编辑：我已经找到了这些方法：http://onehungrymind.com/angularjs-dynamic-templates/和if else语句在AngularJS模板中和动态显示模板在ng-repeat指令中？但它们与我的要求大相径庭。特别是最后一个是最接近我想要的，但我的模板通常有不同的变量名…

谢谢

Answer 1

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

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>

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