Question

使用网格来显示数据库中的数据。我会以这样的方式在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：events是一个包含我数据的数组但我得到了这个结果

请帮助

Answer 1

您需要将ng-repeat添加到要重复的元素中。在您的版本中，您正在创建新的<table>，其中包含事件中每条记录的所有内容。将其移至<td>将给您留下相同的问题，因为它只会为每条记录创建一个新行。

如果你使用的是bootstrap - 你应该使用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>

你需要这样的东西，以便每隔3条记录突破ng-repeat循环：

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

有关详情here

，请参阅Plunker示例

如何使用表格显示网格

1 个答案: