如何使用表格顯示網格

正在使用網格來顯示我的數據庫中的數據。我會在3列inthis方式的表格中顯示網格：如何使用表格顯示網格

我試試這個代碼

<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：事件是包含我的數據的數組。
但我得到這個結果

任何幫助，請

來源

2016-05-14 Sihem Hcine

您需要的ng-repeat添加要重複的元素。在您的版本中，您正在創建新的<table>，其中包含事件中的每個記錄的所有內容。將它移動到<td>會使您遇到同樣的問題，因爲它只會爲每條記錄創建一個新行。

如果您使用引導 - 您應該使用grid system而不是<table>來進行佈局，例如。

<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>

你會需要這樣的東西，打出來的ng-repeat循環的每3個記錄：

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

見Plunker例子更多的想法here

來源

2016-05-14 13:45:52

如何使用表格顯示網格

回答

相關問題