AngularJS “Vertical” 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>

Which produces the following table:

Attribute1 | Attribute2 | ... | AttributeN
------------------------------------------
value1.1   | value1.2   | ... | value1.N
value2.1   | value2.2   | ... | value2.N
...
valueN.1   | valueN.2   | ... | valueN.N

Instead of this, I need:

Attribute1 | value1.1 | value2.1 | ... | valueN.1
Attribute2 | value1.2 | value2.2 | ... | valueN.2
...        | ...      | ...      | ... | ...
AttributeN | value1.N | value2.N | ... | valueN.N

So the question: how do I achieve this?

Without manipulation "by hands" (js-jQuery), without leaving angular world - there will be some event handlers & etc.

回答1:

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.

回答2:

One approach to solve this problem is by restructuring the jsonArray into an indexed object data structure.

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>

回答3:

You could write custom filter.

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

    return newArray;
} ])

Use it like`

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

This way ng-repeat will convert your jsonArray to new formed array and use it in the loop, but you will still have your jsonArray untouched in case you use it in other places.

来源：https://stackoverflow.com/questions/34308094/angularjs-vertical-ng-repeat

标签

angularjs

angularjs-ng-repeat