AngularJS“垂直" ng-repeat [英] AngularJS "Vertical" ng-repeat

问题描述

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

Let's say we have an array of people in the JSON format. Each entity has about 100 attributes. The standard approach of using 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)，不离开棱角分明的世界-将会有一些事件处理程序&等

推荐答案

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

If I understand correctly what you are trying to achieve, then this is how you would do it:

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

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

Assuming your data is an array of objects with the same properties, you iterate over the first object in the array to get the keys, which would make the vertical table headers.

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

After that, you iterate over the whole array and simply output the value for the specific key. Here's a fiddle showing the output:

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

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

Of course, you'd have to change things around if you want to manually define the names of your headers. This example just takes the keys in your data. You could also manipulate the data before sending it to the view, so you only send the keys you need.

这篇关于AngularJS“垂直" ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！