html - 设置网格样式结果的问题

Question

我想在网格结果表中显示一个表，但我失败了...

我希望它看起来像这样:

我正在尝试这样做，但它只显示一行:

<div class="resultsTable">
            <table style="display: inline-table">
                <tr ng-repeat="result in results" class="resultsBox">
                    <td>
                        <img src="{{result.imageUrl}}" width="200px">
                        <h4>{{result.name}}</h4>
                    </td>
                </tr>



            </table>
        </div>

CSS:

.resultsBox{
    background-color: #ffffff;
    height: 200px;
    width: 200px;
    padding-left: 10px;
    padding-top: 20px;
}

.resultsBox>img{
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.resultsTable{
    max-height: 500px;
    overflow: scroll;
    display: inline-table;
    height: 500px;

}

Answer 1

从您共享的模板中，您只看到 n 行的一列是正常的。它不是指向 css 的链接，而是指向将生成的标记的链接。

您的 results 属性是一个一维数组，例如 [{obj1}, {obj2}, {obj3}] 但您想显示一个二维数组矩阵，即 [[{ obj1}, {obj2}], [{obj3}, {obj4}]]。不幸的是，在 AngularJS 中生成基于一维数组的矩阵并不那么容易。这就是为什么我会建议您更改结果的结构以匹配其矩阵显示。然后将您的模板更改为:

<div class="resultsTable">
    <table style="display: inline-table">
      <tr ng-repeat="row in results"> //loop over all row of 2 elements
        <td ng-repeat="cell in row" class="resultsBox"> //loop over elements
          <img src="{{cell.imageUrl}}" width="200px">
          <h4>{{cell.name}}</h4>
        </td>
      </tr>
    </table>
  </div>

查看工作中的 plunker here