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），没有离开角度世界 - 会有一些事件处理程序＆amp;等

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不受影响。

AngularJS“垂直”ng重复

3 个答案: