8

AngularJS を使用して、競合オブジェクトの配列を含むイベント オブジェクトの配列を含む JSON オブジェクトを反復処理しています。

eventそれぞれを表に表示してから、それぞれを に表示したいcompetitionのですが、行ごとにtd3つのセルしかありません

<tr>各イベントのテーブルのリストを返すために ng-repeat を使用していますが、3<td>秒ごとに競技会を新しいものに分割するのに問題があります

JSON から自分の巨大なオブジェクトを再構築する以外に、Angular で説明していることを行う最善の方法は何ですか?


現在のビュー:

<table ng-repeat="listing in listings">
    <tr>
        <th colspan="3">{{listing.name}}</th>
    </tr>
    <tr>
        <td ng-repeat="competition in listing.competitions">
            {{competition.id}} - {{competition.name}}
        </td>
    </tr>
</table>

望ましい出力:

<table>
    <tr>
        <th colspan="3">Event Name</th>
    </tr>
    <tr>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
    </tr>
    <tr>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
    </tr>
</table>

コントローラ:

app.controller('EventsCtrl', function ($scope, $http) {
  $scope.loading = true;

  $http.get('scripts/JSON/events.json').then(function (response) {
    var listings = response['data'].events;

    $scope.listings = listings;
  });
});

イベント.json

{
"events": [
    {
        "id": 418,
        "name": "et ullamco",
        "competitions": [
            {
                "id": 933,
                "name": "qui in deserunt occaecat et",
                "startTime": 1381092189
            },
            {
                "id": 853,
                "name": "eu enim ex incididunt do",
                "startTime": 1380708266
            },
            {
                "id": 5738,
                "name": "ad est ut aliquip et",
                "startTime": 1381366623
            },
            {
                "id": 7599,
                "name": "sit ex voluptate aliqua dolor",
                "startTime": 1381284106
            },
            {
                "id": 7481,
                "name": "laborum consequat deserunt do aliqua",
                "startTime": 1380874273
            },
            {
                "id": 3441,
                "name": "amet reprehenderit sint sunt proident",
                "startTime": 1380554850
            },
            {
                "id": 1959,
                "name": "ullamco minim minim in voluptate",
                "startTime": 1380651981
            }
        ]
    },
4

1 に答える 1

1

テーブルを使用していますが、データのセマンティクスは、リストのリストがあることを示しています。<ul><li>グリッドの代わりにこれを出力することを検討する必要があります。

<ul ng-repeat="listing in listings">
    <li>
        <h2>{{listing.name}}</h2>
        <ul ng-repeat="competition in listing.competitions">
            <li>
              {{competition.id}} - {{competition.name}}
            </li>
        </ul>
    </li>
</ul>

上記の HTML を使用して、CSS で目的のレイアウトを非常に簡単に実現できます。例については、Twitter Bootstrap または Foundation の「ブロック グリッド」を確認してください。テーブルは通常、実際に表形式のデータに対してのみ使用する必要があります。

でも...

あなたが提案する方法でテンプレートを代替する他の理由があるかもしれないので、あなたの質問はまだ答える必要があります. これに関数を使用して、一度に 3 つ取得できます。

<table ng-repeat="listing in listings">
    <tr>
        <th colspan="3">{{listing.name}}</th>
    </tr>
    <tr ng-repeat="group in competitions">
        <td ng-repeat="competition in group">
            {{competition.id}} - {{competition.name}}
        </td>
    </tr>
</table>

コントローラーで、ネストされたリピーターにバインドする「リストのリスト」を作成できます

// Adapted from Fresheyeball's solution

$scope.competitions = []
compSet = []
for(var i; i < $scope.listings.competitions; i++){
   var competition = $scope.listings.competitions[i];
   if( i % 3 ){
      $scope.competitions.push(compSet);
      compSet = [];
   }
   compSet.push(competition);
}
于 2013-10-13T17:33:27.293 に答える