1

我有一个社交媒体统计对象。我正在尝试将它们重复到表格中。这是我的笨蛋。

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。但我没有运气。关于如何在单元格中显示内部对象（键和值）的任何想法？

4

3 回答 3

6

您可以定义返回 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中看到它

于 2013-06-19T21:00:35.247 回答
1

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

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

于 2013-06-19T19:46:21.613 回答
1

我假设您希望这些值中的每一个都有自己的行，但您没有准确解释您希望它如何工作。我认为最好通过将您想要的内容的干净版本传递给 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">
于 2013-06-19T22:26:24.953 回答