在带有colspan和rowspan的表中重复

这里有一个所需表格和Javascript函数的小提琴,其中包含我要填充表格的数组,我不知道是怎么做的,因为如果我使用rowspan,colspan我必须为每个产品创建不同的...

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

此外,在jsfiddle中的colspan和rowspan值不能是静态的,因为每行可能包含不同数量的产品......所以第二个问题是:我怎样才能动态设置rowspan值？它们应该在每个表格行中指定..

如果您让rowspan依赖于inventory.length当前事务,然后使用嵌套ng-repeats ,则可以这样做.

开始了:

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;
}

  

        

    

      

          
Movement
          
Products
          
Supplier
          
Cost
        
        

          
Name
          
Quantity
          
Condition
        
      
    
    

      

        
Sell
        
{{t.inventory[0].product.name}}
        
{{t.inventory[0].quantity}}
        
{{t.inventory[0].product_condition.name}}
        
XCLIENT
        
$100
      
      

        
{{item.product.name}}
        
{{item.quantity}}
        
{{item.product_condition.name}}