Question

我正在创建一个Angular应用程序，我必须在Tiles中显示数据，我们在netflix上看到的那种切片，

但我所做的只是表格格式

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

<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

由于你的问题过于宽泛，我已经做了一个简单的小提琴，你可以按照它来实现你的目标。

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>

我使用了自举网格系统而不是表格。我还添加了一个盒子阴影效果来分隔瓷砖。

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

Answer 2

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

在你的css中，如下所示

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

Answer 3

您可以使用带有CSS框的span和in-line块来执行此操作：

<style>
    background-color: lightgrey;
    width: 150px;
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
}
</style>
     <span style="display:inline-block" class="mydiv" ng-repeat="f in friends">Name: {{f.name}}<br />Phone: {{f.phone}}<br>Age: {{f.age}}</span>

这是Plunker

如何以Tiles格式而不是表格形式显示角度数据

3 个答案: