AngularJS "Vertical"ng-repeat

Question

假设我们有一组 JSON 格式的人。每个实体大约有 100 个属性。使用 ng-repeat 的标准方法:

...
<tr>
  <th>Attribute1</th>
  <th>Attribute2</th>
  ...
  <th>AttributeN</th>
</tr>
...
<tr ng-repeat="obj in jsonArray">
  <td>{{ obj.attr1 }}</td>
  <td>{{ obj.attr1 }}</td>
  ...
  <td>{{ obj.attrN }}</td>
</tr>

产生下表:

Attribute1 | Attribute2 | ... | AttributeN
------------------------------------------
value1.1   | value1.2   | ... | value1.N
value2.1   | value2.2   | ... | value2.N
...
valueN.1   | valueN.2   | ... | valueN.N

而不是这个，我需要:

Attribute1 | value1.1 | value2.1 | ... | valueN.1
Attribute2 | value1.2 | value2.2 | ... | valueN.2
...        | ...      | ...      | ... | ...
AttributeN | value1.N | value2.N | ... | valueN.N

所以问题是:我如何实现这一目标？

无需“手动”操作(js-jQuery)，无需离开 angular 世界 - 会有一些事件处理程序等。

Answer 1

如果我正确理解您要实现的目标，那么您将这样做:

<table>
  <tr ng-repeat="(key, value) in people[0]">
    <th>{{key}}</th>
    <td ng-repeat="person in people">
      {{person[key]}}
    </td>
  </tr>
</table>

假设您的数据是具有相同属性的对象数组，您遍历数组中的第一个对象以获取键，这将生成垂直表标题。

之后，您遍历整个数组并简单地输出特定键的值。这是一个显示输出的 fiddle :

http://jsfiddle.net/andreiho/huL8pvmg/1/

当然，如果您想手动定义标题的名称，则必须进行更改。此示例仅采用数据中的键。您还可以在将数据发送到 View 之前对其进行操作，因此您只需发送所需的 key 。