Question

我需要在一个表格中显示一对数组，其中第一列跨越2行，就像在图像中一样。

数组如下所示：

$scope.products = [{
    p0: {name: "n1", img: "a", brand: "apple", desc: "1"},
    p1: {name: "n2", img: "b", brand: "apple", desc: "2"}
},{
    p0: {name: "n3", img: "c", brand: "apple", desc: "3"},
    p1: {name: "n4", img: "d", brand: "apple", desc: "4"}
},{
    p0: {name: "n5", img: "e", brand: "apple", desc: "5"},
    p1: {name: "n6", img: "f", brand: "apple", desc: "6"}
},{
    p0: {name: "n7", img: "g", brand: "apple", desc: "7"},
    p1: {name: "n8", img: "h", brand: "apple", desc: "8"}
}];

“硬编码”版本将是

<table class="table table-bordered">
    <tr>
        <th></th>
        <th>Brand</th>
        <th>Product name</th>
    </tr>
    <tr>
        <th rowspan="2">a b</th>
        <td>apple</td>
        <td>n1</td>
    </tr>
    <tr>
        <td>apple</td>
        <td>n2</td>
    </tr>
    <tr>
        <th rowspan="2">c d</th>
        <td>apple</td>
        <td>n3</td>
    </tr>
    <tr>
        <td>apple</td>
        <td>n4</td>
    </tr>
</table>

我不知道如何通过ng-repeat实现这一目标。我试着像下面的代码一样傻，但显然它不起作用。帮助

<div ng-repeat="pair in products">
    <tr>
        <th rowspan="2">{{pair.p0.img}} {{pair.p1.img}}</th>
        <td>{{pair.p0.brand}}</td>
        <td>{{pair.p0.name}}</td>
    </tr>
    <tr>
        <td>{{pair.p1.brand}}</td>
        <td>{{pair.p1.name}}</td>
    </tr>
</div>

enter image description here

Answer 1

你可以使用像：

这样的手段吗？

<tbody ng-repeat="...">
   <tr>...</tr>
   ...
</tbody>

在你的例子中？

Answer 2

你想在表中为每个记录插入两个tr元素吗？

您可以像这样使用标记ng-repeat-start和ng-repeat-end：

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
      var app = angular.module('yourApp', []);
      app.controller('MyCtrl', function($scope) {
        $scope.products = [{
            p0: { name: "n1", img: "a", brand: "apple", desc: "1" },
            p1: { name: "n2", img: "b", brand: "apple", desc: "2" }
        }, {
            p0: { name: "n3", img: "c", brand: "apple", desc: "3" },
            p1: { name: "n4", img: "d", brand: "apple", desc: "4" }
        }, {
            p0: { name: "n5", img: "e", brand: "apple", desc: "5" },
            p1: { name: "n6", img: "f", brand: "apple", desc: "6" }
        }, {
            p0: { name: "n7", img: "g", brand: "apple", desc: "7" },
            p1: { name: "n8", img: "h", brand: "apple", desc: "8" }
        }];
      });
    </script>
  </head>

  <body ng-app="yourApp">
    <div ng-controller="MyCtrl">
      <table class="table table-bordered">
        <tbody>
          <tr>
            <th></th>
            <th>Brand</th>
            <th>Product name</th>
          </tr>
          <tr>
            <th rowspan="2">a b</th>
            <td>apple</td>
            <td>n1</td>
          </tr>
          <tr>
            <td>apple</td>
            <td>n2</td>
          </tr>
          <tr>
            <th rowspan="2">c d</th>
            <td>apple</td>
            <td>n3</td>
          </tr>
          <tr>
            <td>apple</td>
            <td>n4</td>
          </tr>
        </tbody>
      </table>

      <table class="table table-bordered">
        <tbody>
          <tr ng-repeat-start="pair in products"></tr>
              <th rowspan="2">{{pair.p0.img}} {{pair.p1.img}}</th>
              <td>{{pair.p0.brand}}</td>
              <td>{{pair.p0.name}}</td>
          </tr>
          <tr>
              <td>{{pair.p1.brand}}</td>
              <td>{{pair.p1.name}}</td>
          <tr ng-repeat-end></tr>
        </tbody>
      </table>

    </div>
  </body>

</html>

我添加了plunker

ng对应对，用rowspan =“2”构建表

2 个答案: