如何使用多个级别的json重复到html表？

Question

我有社交媒体统计的对象.我正在尝试将它们重复到表格中.这是我的傻瓜.

HTML:

<table>
      <tr ng-repeat="(metric, metricData) in data">
        <td>{{metric}}</td>
        <td>{{metricData}}</td>
      </tr>
</table>

控制器对象:

 $scope.data = { buzz:0, 
                  Delicious:121,
                  Facebook: 
                  { 
                    like_count: "6266",
                    share_count: "20746"
                  },
                  GooglePlusOne:429,
                  LinkedIn:820,
                  Twitter:4074
                };

当我到达Facebook结果时遇到问题.在<td>整个对象中显示(因为它应该与我如何设置我的代码).但我宁愿发生的是重复该对象并显示单元格中的键和值.

我尝试做一些事情,看看是否metricData是一个对象,并做了某种ng-repeat.但我没有运气.关于如何在单元格中显示内部对象(键和值)的任何想法？

Answer 1

您可以定义一个范围函数,返回metricData的类型:

  $scope.typeOf = function(input) {
    return typeof input;
  }

然后你可以根据它的类型显示它:

  <tr ng-repeat="(metric, metricData) in data">
    <td>{{metric}}</td>
    <td ng-switch on="typeOf(metricData)">
      <div ng-switch-when="object">
        <div ng-repeat="(key, value) in metricData">
          <span>{{key}}</span>
          <span>{{value}}</span>
        </div>
      </div> 
      <span ng-switch-default>{{metricData}}</span>  
    </td>
  </tr>

你可以在这个Plunker中看到它