2

我想知道是否可以在如下所示的模型中使用 ng-repeat：

示例模型：

$scope.items = {
   item1:{[1,2,3,4,5]},
   item2:{[a,b,c,d,e]},
   item3:{[a1,b2,c3,d4,e5]}
};

使用 ng-repeat 的表格应该是这样的：

-------------------------
| Item1 | Item2 | Item3 |
-------------------------
|   1   |   a   |   a1  |
|   2   |   b   |   b2  |
|   3   |   c   |   c3  |
|   4   |   d   |   d4  |
|   5   |   e   |   e5  |
-------------------------

如果无法使用此模型，您能否提出一些替代方案？任何帮助将不胜感激。提前致谢。

4

2 回答 2

4

您可以像这样更改数据模型

function Ctrl($scope) {
    $scope.items = [{
        item1: 1,
        item2: 'a',
        item3: 'a1'
    }, {
        item1: 2,
        item2: 'b',
        item3: 'b2'
    }, {
        item1: 3,
        item2: 'c',
        item3: 'c3'
    }, ...];
}

<div ng-app ng-controller="Ctrl">
    <table>
        <tbody>
            <th>item1</th>
            <th>item2</th>
            <th>item3</th>
            <tr ng-repeat="item in items">{{item}}
                <td>{{item.item1}}</td>
                <td>{{item.item2}}</td>
                <td>{{item.item3}}</td>
            </tr>
        </tbody>
    </table>
</div>

DEMO

于 2013-08-20T05:28:14.737 回答
2

如果您不能/不想更改数据结构，或者不知道键的数量等，您也可以即时操作它。这是一种算法，它适用于具有任意数量的键的对象，具有任意长度的数组（只要每个数组具有相同的长度）：

var results = { headers: [], values: [] };
angular.forEach(items, function(value, key) {
  results.headers.push(key);
  angular.forEach(value, function(inner, index) {
    results.values[index] = results.values[index] || [];
    results.values[index].push(inner);
  });
});
return results;

一旦你有你的转置数组，你可以通过编程循环它：

<table ng-controller="DataController">
  <tr>
    <th ng-repeat="header in transposed.headers">{{header}}</th>
  </tr>
  <tr ng-repeat="ary in transposed.values">
    <td ng-repeat="item in ary">{{item}}</td>
  </tr>
</table>

items这是一个每次更改对象时都会重新转置对象的演示：http: //jsfiddle.net/BinaryMuse/BAGL5/

于 2013-08-20T05:47:39.307 回答