Angularjs 如何使用多个级别的json将ng复制到html表中？

我有一个社交媒体统计的对象。我正试着把它们放在桌子上

HTML:

当我看到Facebook的结果时，我遇到了一个问题。在

中显示整个对象（我的代码设置应该是这样的）。但我更希望通过该对象重复，并在单元格中显示键和值

---

我试着做一些事情，看看

metricData

是否是一个对象，并对其进行某种ng重复。但我没那么幸运关于如何在单元格中显示内部对象（键和值）有什么想法吗？

听起来您需要一个特定的指令来连接子对象以实现递归，请看以下示例：

---

您需要检查的是，如果您需要重复的是一个对象而不是一个值，则添加新元素并编译它，然后重新开始该过程。

听起来您需要一个特定的指令来连接子对象以实现递归，请看以下示例：

---

您需要检查的是，如果需要重复的是对象而不是值，则添加新元素并编译它，然后重新开始该过程。

您可以定义一个返回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>

{{metric}}
{{key}}
{{value}}
{{metricData}}

---

您可以在这里看到它。

您可以定义一个范围函数，返回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>

{{metric}}
{{key}}
{{value}}
{{metricData}}

---

您可以在这里看到它，我假设您希望这些值中的每一个都有自己的行，但您没有确切地解释它是如何工作的。我认为最好通过向ng repeat指令传递一个干净的版本来处理这个问题。我假设您希望在示例中为facebook设置两行。您可以创建一个过滤器来平展度量，这样就有了“Facebook\u like\u count”和“Facebook\u share\u count”属性：

然后，您可以使用过滤器进行重复操作：

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

---

我假设您希望这些值中的每一个都有自己的行，但您没有确切地解释它是如何工作的。我认为最好通过向ng repeat指令传递一个干净的版本来处理这个问题。我假设您希望在示例中为facebook设置两行。您可以创建一个过滤器来平展度量，这样就有了“Facebook\u like\u count”和“Facebook\u share\u count”属性：

然后，您可以使用过滤器进行重复操作：

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

为什么不能嵌套ng重复？@smk我知道你可以嵌套ng重复。但在使用表时，我无法让它正常工作。你会怎么做呢？在某一点之后，你会在什么上面筑巢<代码>没有孩子，除非我弄错了。在不久的将来，我将有一个项目，在这个项目中，物体的深度将达到4-5层。。。如果我连这个都不能用，我不知道在这种情况下我会怎么做。哈。为什么你不能嵌套ng重复？@smk我知道你可以嵌套ng重复。但在使用表时，我无法让它正常工作。你会怎么做呢？在某一点之后，你会在什么上面筑巢<代码>没有孩子，除非我弄错了。在不久的将来，我将有一个项目，在这个项目中，物体的深度将达到4-5层。。。如果我连这个都不能用，我不知道在这种情况下我会怎么做。哈，它并不总是一个数字。在我给你的示例代码中是这样的。但是在更大的数据集中，也有小数和文本值。我修改了我的答案来处理其他数据类型，就像这个解决方案一样。我还没有尝试过直接的方法。正在尝试先使用ng开关。但是typeOf（）总是返回undefined。不知道为什么。为了简化一些，我尝试使用

angular.isObject（）

。然后打开

true

。但也不走运。我加了一个叉子给你们，谢谢。昨天我终于找到了工作。我提供的plunker示例是一个非常简单的实际情况。但我最终还是使用了

ng开关
。谢谢你的帮助。您上面的解决方案很好。它并不总是一个数字。在我给你的示例代码中是这样的。但是在更大的数据集中，也有小数和文本值。我修改了我的答案来处理其他数据类型，就像这个解决方案一样。我还没有尝试过直接的方法。正在尝试先使用ng开关。但是typeOf（）总是返回undefined。不知道为什么。为了简化一些，我尝试使用
angular.isObject（）
。然后打开
true
。但也不走运。我加了一个叉子给你们，谢谢。昨天我终于找到了工作。我提供的plunker示例是一个非常简单的实际情况。但我最终还是使用了
ng开关
。谢谢你的帮助。你上面的解决方案很好。