angularjs - 使用 colspan 和 rowspan 在表中重复 ng-repeat

Question

Here's a fiddle使用所需的表和包含我要填充表的数组的 Javascript 函数，我不知道如何，因为如果我使用 rowspan和 colspan我必须创建不同的 <tr>对于每个产品...

如果有另一种方法来获得所需的表，我很想知道...这里的主要问题是:我如何使用 ng-repeat在使用 rowspan 和 colspan 的表中？

此外，<thead> 处的 colspan 和 rowspan 值不能像 jsfiddle 中那样是静态的，因为每一行可能包含不同数量的产品......所以第二个问题是:我如何动态设置 rowspan值(value)？它们应该在每个表行中指定..

Answer 1

如果您让 rowspan 依赖于当前交易的 inventory.length，然后您使用嵌套的 ng-repeat，这是可能的

开始吧:

var myApp = angular.module('myApp', []);

function MainCtrl($scope) {
    var vm = $scope;
    vm.hello = 123;
    vm.transactions = [{
        id: 1,
        cost: 100,
        transaction_type: { id: 1, name: 'Sell' },
        client: { id: 2, name: 'XCLIENT' },
        inventory: [
            { id: 1, quantity: 4, product: { id: 1, name: 'Cup' }, product_condition: { id: 2, name: 'New' } },
            { id: 2, quantity: 10, product: { id: 2, name: 'Shirt' }, product_condition: { id: 2, name: 'New' } }
        ]
    }, {
        id: 2,
        cost: 40,
        transaction_type: { id: 2, name: 'Buy' },
        supplier: { id: 3, name: 'XSUPPLIER' },
        inventory: [
            { id: 1, quantity: 2, product: { id: 1, name: 'Cup' }, product_condition: { id: 2, name: 'New' } },
            { id: 2, quantity: 5, product: { id: 6, name: 'Pants' }, product_condition: { id: 2, name: 'New' } }
        ]
    }];
}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <table ng-controller="MainCtrl">
    <thead>
      <div>
        <tr>
          <td rowspan=2>Movement</td>
          <td colspan=3>Products</td>
          <td rowspan=2>Supplier</td>
          <td rowspan=2>Cost</td>
        </tr>
        <tr>
          <td>Name</td>
          <td>Quantity</td>
          <td>Condition</td>
        </tr>
      </div>
    </thead>
    <tbody ng-repeat="t in transactions">
      <tr>
        <td rowspan="{{t.inventory.length}}">Sell</td>
        <td>{{t.inventory[0].product.name}}</td>
        <td>{{t.inventory[0].quantity}}</td>
        <td>{{t.inventory[0].product_condition.name}}</td>
        <td rowspan="{{t.inventory.length}}">XCLIENT</td>
        <td rowspan="{{t.inventory.length}}">$100</td>
      </tr>
      <tr ng-repeat="item in t.inventory" ng-if="$index > 0">
        <td>{{item.product.name}}</td>
        <td>{{item.quantity}}</td>
        <td>{{item.product_condition.name}}</td>
      </tr>
    </tbody>
  </table>
</div>

(Fiddle)