问题设置网格样式结果

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