如何在具有多级 json 的 html 表中重复 ng-repeat？答案

【问题标题】：How to ng-repeat into html table with multiple levels of json?如何在具有多级 json 的 html 表中重复 ng-repeat？
【发布时间】：2013-06-16 10:04:49
【问题描述】：

我有一个社交媒体统计对象。我正在尝试将它们重复到表格中。 Here's my plunker.

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。但我没有运气。 知道如何在单元格中显示内部对象（键和值）吗？

【问题讨论】：

为什么不能嵌套 ng-repeats？
@smk 我知道你可以嵌套 ng-repeats。但是在使用表格时我无法让它正常工作。你会怎么做呢？
在某一点之后，你打算在什么上面筑巢？ <td> 没有孩子，除非我弄错了。在不久的将来，我将有一个对象深入 4-5 层的项目......如果我什至无法让这个对象工作，我不知道在这些情况下我会做什么。哈。

标签： angularjs json object html-table angularjs-ng-repeat

【解决方案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看到它

【讨论】：

它并不总是一个数字。在我给你的示例代码中。但在更大的数据集中，也有小数和文本值。
我修改了我的答案以处理其他数据类型
我喜欢这个解决方案。我还没有尝试过指令方法。尝试先使用 ng-switch。但是 typeOf() 总是返回未定义的。不知道为什么。为了进一步简化，我尝试使用angular.isObject()。然后打开true。但也没有运气。
我用 ng-switch 添加了你的 plunker 的一个分支
谢谢。我昨天终于得到了一些工作。我提供的示例 plunker 是实际情况的一个非常简单的版本。但我最终让它与ng-switch 一起工作。感谢帮助。您上面的解决方案很棒。

【解决方案2】：

我假设您希望这些值中的每一个都有自己的行，但您没有准确解释您希望它如何工作。我认为最好通过将您想要的内容的干净版本传递给 ng-repeat 指令来处理这个问题。我假设您希望样本中的 facebook 有两行。您可以创建一个过滤器来展平指标，以便有属性“Facebook_like_count”和“Facebook_share_count”(PLUNKER)：

app.filter('flatten', function() {
  function flattenTo(source, dest, predicate) {
    predicate = predicate || '';
    angular.forEach(source, function(value, key) {
      if (typeof(value) == 'object') {
        flattenTo(value, dest, predicate + key + '_');
      } else {
        dest[predicate + key] = value;
      }
    });
  }

  return function(input) {
    var obj = {};
    flattenTo(input, obj, '');
    return obj;
  }
});

那么你的重复就可以使用过滤器了：

<tr ng-repeat="(metric, metricData) in data|flatten">

【讨论】：

【解决方案3】：

听起来你需要一个特定的指令来连接子级递归，看看这个例子：Recursion in Angular directives

你要检查的是你需要重复的是一个对象而不是一个值，然后添加新元素编译它，然后重新开始这个过程。

【讨论】：