Question

我想知道是否可以在模型中使用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  |
-------------------------

如果无法使用此型号，您能否建议一些alernatives？任何帮助将不胜感激。提前谢谢。

Answer 1

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

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

Answer 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对象时重新转置{{1}}对象的演示：http://jsfiddle.net/BinaryMuse/BAGL5/

AngularJS ng-repeat在此模型中

2 个答案: