AngularJS“垂直”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>

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

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

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

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

Answer 2

解决此问题的一种方法是将jsonArray 重组为索引对象数据结构。

DEMO

Javascript

.controller('DemoController', function(Data, $scope) {

  Data.all().then(function(response) {
    $scope.indexedObjects = indexByAttribute(response.data);
  });

  function indexByAttribute(collection) {
    return collection.reduce(function(result, item) {

      angular.forEach(item, function(value, index) {
        result[index] = result[index] || [];
        result[index].push(value);
      });

      return result;
    }, {});
  }

});

HTML

<table>
  <tr ng-repeat="(index, values) in indexedObjects track by index">
    <th>{{ index }}</th>
    <td ng-repeat="value in values track by $index">
      {{ value }}
    </td>
  </tr>
</table>

Answer 3

您可以编写自定义filter。

yourModule.filter('myFilter', [ function (arr) {
    var newArr = [];
    // loop over arr and construct newArr as you wish
    ... 

    return newArray;
} ])

像使用它`

<tr ng-repeat="obj in (jsonArray | myFilter)">
    <td>{{ obj.attr1 }}</td>
    <td>{{ obj.attr2 }}</td>
    ...
    <td>{{ obj.attrN }}</td>
</tr>

这样 ng-repeat 会将您的 jsonArray 转换为新形成的数组并在循环中使用它，但您的 jsonArray 仍然保持不变，以防您在其他地方使用它。