ng-repeat в таблице с colspan и rowspan

Это возможно, если вы позволяете 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>

(скрипт)

Вот полностью динамический способ, включая динамический rowspan:

HTML:

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

JS:

function MainCtrl($scope) {
 //var vm = this;
  $scope.rowspan = 3;
  $scope.transactions = [{
    id: 1,
    cost: 100,
    transaction_type: {
      id: 1,
      name: 'Sell'
    },
    client: {
      id: 2,
      name: 'XCLIENT'
    },
    invetory: [{
      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: 3,
      quantity: 101,
      product: {
        id: 3,
        name: 'Shirt_C'
      },
      product_condition: {
        id: 3,
        name: 'New_C'
      }
    }]
  }, {
    id: 2,
    cost: 40,
    transaction_type: {
      id: 2,
      name: 'Buy'
    },
    supplier: {
      id: 3,
      name: 'XSUPPLIER'
    },
    invetory: [{
      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'
      }
    },
              {
      id: 3,
      quantity: 55,
      product: {
        id: 7,
        name: 'Pants_C'
      },
      product_condition: {
        id: 8,
        name: 'New_C'
      }
    }]
  }];
}

попробуйте код ниже и не забудьте включить библиотеку angular 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>

Как я могу использовать ng-repeat в таблице, которая использует rowspan и colspan?

Да, вы можете использовать, я приведу очень простой пример и не буду исправлять все за вас.

<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, где это необходимо, надеюсь, вы поняли идею.