CODEWITHSUNDEEP
htmlangularjs
Sihem Hcine
Sihem Hcine

Reputation: 1129

how display grids using table

Am using grid to diplay data from my data base. I would display grids in a table of 3 columns inthis way : enter image description here

I try this code 

 <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 is an array that contains my data.
But i get this result

enter image description here

Any help please

Upvotes: 0

Views: 57

Answers (1)

James P
James P

Reputation: 2256

You need to add the ng-repeat to the element you want repeated. In your version you are creating new <table> with all contents for each record in events. Moving it to the <td> will leave you with same issue as it will just create a new row for each record.

If you are using bootstrap - you should just use the grid system instead of the <table> for layouts, something like.

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

You will need something like, to break out of the ng-repeat loop every 3 records:

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

See Plunker examples for more of an idea here

Upvotes: 1

Related Questions