html - 如何以 Tiles 格式而不是表格格式显示 Angular 数据

Question

我正在制作一个 Angular 应用程序，我必须在其中显示数据，就像在 Tiles 中一样，我们在 netflix 上看到的那种图 block ，

但我所做的一切就像表格格式一样，

不确定如何以网格/图 block 格式显示数据，搜索结果应作为一组图 block 显示在搜索框下方。 4 block 瓷砖。非常感谢任何帮助或建议。

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

由于您的问题过于宽泛，我制作了一个简单的 fiddle ，您可以按照它来实现您的目标。

http://jsfiddle.net/ov90m3mu/

<div class="row">
  <div class="col-xs-3 col-sm-3 col-md-3 tile" ng-repeat="tile in items">
      <h3>
        {{tile.name}}
      </h3>
      <p>
        {{tile.description}}
      </p>
  </div>
</div>

我使用的不是表格，而是引导网格系统。我还添加了框阴影效果来分隔图 block 。

对于较小的屏幕，您可能需要每行较少的图 block 。 I recommend a good read .