動的テーブルの作成JavaScriptとJavaScriptの配列からのAngularJS

Question

HTMLとAngularJSを使用したラウンドロビン競争の形式で動的テーブルを作成するのに役立つ必要があります。文字列の配列が与えられ、リストに含まれる名前の数に基づいてテーブルが作成されるため、テーブルの一部が動的に生成され、テーブルの一部は常に同じになります。これは、8つの名前の配列を渡した場合に生成されるテーブルの例です。簡単にするために、すべてを空白にしていますが、テーブルが生成されたときには、列A、B、およびCのみに情報があります。残りのボックスはすべてテキスト入力フィールドでなければなりません。

今まで私がやったテーブルのほとんどはかなりシンプルでしたが、私はここで少し深く考えています。どんな助けでも大歓迎です。

が

Answer 1

あなたは常にフル8つのチームを持っていると仮定すると、これはあなたが

<table> 
    <tr> 
    <th>club</th> 
    <th>team</th> 
    <th>#</th> 
    <th ng-repeat="item in items">{{$index+1}}</th> 
    <th>V</th> 
    <th>TS</th> 
    </tr> 
    <tr ng-repeat="item in items"> 
    <td>{{item.club}}</td> 
    <td>{{item.team}}</td> 
    <td>{{item.rank}}</td> 
    <td ng-repeat="item in items" ng-class="{black:$index==$parent.$index}"></td> 
    <td><input ng-model="item.v"></td> 
    <td><input ng-model="item.ts"></td> 
    </tr> 
</table> 

DEMO

Answer 2

を始めるだろうこれは、ネストされたng-repeat要素を使用しての本当にいい例です。

実用的なデモについてはplunkerをご覧ください。

ボックスをブラックアウトするタイミングを検出する主な方法は、外側のng-repeat（各エントリの行を生成する場所）にng-init="$rowIndex=$index"を使用することです。 「{：$インデックス== $親$インデックス。黒}」これは、（我々は、各エントリの列を生成する）内ng-repeatこれはしかしスニペット NGクラス=非常に有用であったng-class="{'blackout': $index==$rowIndex}"