AngularJS“垂直"ng-重复 [英] 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)，无需离开 angular 世界 - 会有一些事件处理程序 &等

推荐答案

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

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-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！