Question

带有所需表格的

Here's a fiddle和包含我要填充表格的数组的Javascript函数，我不知道是怎么做的，因为如果我使用rowspan和{{ 1}}我必须为每个产品创建不同的colspan ...

如果还有其他方法可以获得所需的表格，我很乐意了解它...这里的主要问题是：如何在使用rowspan和colspan的表中使用<tr>？

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

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)

Answer 2

这是完全动态的方式，包括动态rowspan：

HTML：

for (long i = 142453146368L; i <= 142453146368L; i++)

JS：

<div ng-app>
  <h3>Here's what I want it to be</h3>
  <div ng-controller="MainCtrl">  

  <table >
    <thead>
      <tr>
        <td rowspan='{{rowspan}}'>Movement</td>
        <td colspan='{{rowspan}}'>Products</td>
        <td rowspan='{{rowspan}}'>Supplier</td>
        <td rowspan='{{rowspan}}'>Cost</td>
      </tr>
      <tr>
        <td>Name</td>
        <td>Quantity</td>
        <td>Condition</td>
      </tr>
    </thead>
    <tbody ng-repeat='t in transactions'>     
      <tr ng-init='invCustom=(t.invetory.splice(1))'>
        <td rowspan='{{rowspan}}'>{{t.transaction_type.name}}</td>

        <td>{{t.invetory[0].product.name}}</td>
        <td>{{t.invetory[0].quantity}}</td>
        <td>{{t.invetory[0].product_condition.name}}</td>

        <td ng-if='$index==0' rowspan='{{rowspan}}'>{{t.client.name}}</td>
        <td ng-if='$index==1' rowspan='{{rowspan}}'>{{t.supplier.name}}</td>
        <td rowspan='{{rowspan}}'>{{ t.cost | currency }}</td>
      </tr>
      <tr ng-repeat='tsub in invCustom'> 
        <td>{{tsub.product.name}}</td>
        <td>{{tsub.quantity}}</td>
        <td>{{tsub.product_condition.name}}</td>
      </tr>
    </tbody>  
  </table>
  </div>
    <h4>This data isn't loaded from the controller, I'd like to know how to use ng-repead in this case</h4>

</div>

Answer 3

尝试下面的代码，不要忘记包含角度JS库....

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js
"></script>
<div ng-app>
  <h3>Here's what I want it to be</h3>
  <div ng-controller="MainCtrl">  
  <table >
    <thead>
      <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>
    </thead>
    <tbody ng-repeat='t in transactions' ng-init='i=0'>     
      <tr>
        <td rowspan=2>{{t.transaction_type.name}}</td>

        <td>{{t.invetory[i].product.name}}</td>
        <td>{{t.invetory[i].quantity}}</td>
        <td>{{t.invetory[i].product_condition.name}}</td>

        <td ng-if='$index==0' rowspan=2>{{t.client.name}}</td>
        <td ng-if='$index==1' rowspan=2>{{t.supplier.name}}</td>
        <td rowspan=2>{{ t.cost | currency }}</td>
      </tr>
      <tr>        
         <td>{{t.invetory[i+1].product.name}}</td>
        <td>{{t.invetory[i+1].quantity}}</td>
        <td>{{t.invetory[i+1].product_condition.name}}</td> 
      </tr>
    </tbody>

  </table>
  </div>
    <h4>This data isn't loaded from the controller, I'd like to know how to use ng-repead in this case</h4>

</div>

Answer 4

如何在使用rowspan和colspan的表中使用ng-repeat？

是的，你可以使用，我会提出一个非常基本的例子，而不是为你修复整个事情。

<table>
    <tr ng-repeat="item in mylist">
        <td ng-if="someCondition2" rowspan="2">AAA</td>
        <td ng-if="someCondition1" colspan="2">BBB</td>
        <td ng-if="someCondition3">CCC</td>
    <tr>
</table>

这样你可以有条件地在任何需要的地方添加rowspan或colspan，希望你明白这一点。

在带有colspan和rowspan的表中重复

4 个答案: