SumitHusky SumitHusky - 3 months ago 29
AngularJS Question

How to display angular data in Tiles format rather than a tabular fomat

I am making an Angular application in which I have to display data like in Tiles, the kind of tiles we see on netflix, enter image description here

But all I have made up is like a tabular format, enter image description here

Not sure How to display data in a Grid/tiles format,
The result of the search should be displayed below the search box as a set of tiles. 4 tiles across.
Any help or suggestion is really appreciated.

<table class="table">
<thead>
<tr>
<th><a>ID</a></th>
<th><a>Gender</a></th>
<th><a href="" ng-click="orderByField='name'; reverseSort = !reverseSort">name</a></th>
<th><a href="" ng-click="orderByField='email'; reverseSort = !reverseSort">email</a></th>
<th><a href="" ng-click="orderByField='city'; reverseSort = !reverseSort">city</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in mainVm.users | filter: searchKeyword | orderBy:orderByField:reverseSort" id="trow">
<td>{{user.id}}</td>
<td>{{user.gender}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.city}}</td>
</tr>
</tbody>
</table>

Answer
<ul>
  <li ng-repeat="user in mainVm.users | filter: searchKeyword | orderBy:orderByField:reverseSort" id="trow">
    <!-- Your data --> 
  </li>
</ul>

In your css something like below

li{
 float:left;
 width:200px;
 height:200px;
 display:block;
}