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 に答える