テーブルグリッド表示方法

Question

グリッドを使用してデータベースからデータを表示していますか？私は道inthis 3列のテーブルにグリッドを表示していました：

私は

<table style="width:70%" ng-repeat="e in events" > 
<tr> 
<td> 
     <div class="col-md-3 ticket-grid" > 
     <div class="tickets"> 
      <div class="grid-right"> 
      <font color="red"><h3>{{e.name}}</h3></font> 
      Location: {{e.loc}}<br> 
      Category: Sport <br> 
      Start date: <br> 
      End date: 
      Description: <span>{{e.description}}</span> <br> 
      Contact: {{e.contact}}<br> 
      <a href="#" class="hvr-icon-fade">Confirm</a> 
      <a href="#" class="hvr-icon-sink-away">Refuse</a> 
      </div> 
     <div class="clearfix"> </div> 
     </div> 
</td> 
</tr> 
<tr> 
</tr> 
<tr> 
</tr> 
</table> 

PSこのコードを試してみてください：イベントは私のデータを含む配列です。
しかし、私は

あなたが繰り返したい要素にng-repeatを追加する必要があるすべてのヘルプしてください

Answer 1

この結果を得ます。あなたのバージョンでは、新しいレコード<table>を作成し、各レコードのすべての内容はイベントになります。 <td>に移動すると、各レコードの新しい行が作成されるだけで、同じ問題が発生します。

ブートストラップを使用している場合は、レイアウトには<table>の代わりにgrid systemを使用するだけです。

<div ng-repeat="e in events"> 
    <div class="col-md-4 ticket-grid" > 
     <div class="tickets"> 
      <div class="grid-right"> 
      <font color="red"><h3>{{e.name}}</h3></font> 
      Location: {{e.loc}}<br> 
      Category: Sport <br> 
      Start date: <br> 
      End date: 
      Description: <span>{{e.description}}</span> <br> 
      Contact: {{e.contact}}<br> 
      <a href="#" class="hvr-icon-fade">Confirm</a> 
      <a href="#" class="hvr-icon-sink-away">Refuse</a> 
      </div> 
     <div class="clearfix"> </div> 
     </div> 
    </div> 

あなたはすべての3つの記録ng-repeatループから抜け出すために、のようなものが必要になります。

<div class="clearfix" ng-if="$index % 3 == 0"></div> 

アイデアの多くのための

参照Plunker例here