AngularJS“垂直” ng-repeat

Chip 发表于 Dev

芯片

假设我们有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），就没有离开棱角分明的世界-将会有一些事件处理程序等。

安德烈霍

如果我正确理解您要实现的目标，那么您将按照以下方式进行操作：

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

假设您的数据是具有相同属性的对象数组，则对数组中的第一个对象进行迭代以获取键，这些键将成为垂直表头。

之后，您遍历整个数组并仅输出特定键的值。这是显示输出的小提琴：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。