как отображать сетки с помощью таблицы

Question

как отображать сетки с помощью таблицы

0

Я использую grid для diplay данных из моей базы данных. Я бы отображал сетки в таблице из 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: события - это массив, содержащий мои данные.
Но я получаю этот результат

Любая помощь пожалуйста

Sihem Hcine 14 май 2016, в 14:56

Источник

Теги:

html

angularjs

1 ответ

Ещё вопросы

James P · Answer 1 · 2016-05-14T11-27-00.000Z

Вам нужно добавить ng-repeat к элементу, который вы хотите повторить. В вашей версии вы создаете новую <table> со всем содержимым для каждой записи в событиях. Перемещение его в <td> оставит вас с той же проблемой, что и просто создаст новую строку для каждой записи.

Если вы используете bootstrap - вам нужно просто использовать сетку вместо <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 для большей идеи здесь