Два нг-повтора в одной строке таблицы (tr)

Question

Я хочу повторить два данных, используя ng-repeat в одной строке таблицы.Как я могу иметь это в одной строке таблицы?

<table>
    <thead>
        <tr>
            <th rowspan=2>Line</th>
            <th>Debit Account</th>
            <th>Credit Account</th>
            <th>Ref</th>
            <th>Amount</th>
        </tr>
        <tr>
            <th>Debit Account Name</th>
            <th>Credit Account Name</th>
            <th>Date</th>
            <th colspan=2>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr  ng-repeat="dbAccount in formData.dbAccounts track by $index" ng-repeat-start="crAccount in formData.crAccounts track by $index">
            <td rowspan=2>0000{{$index + 1}}</td>
            <td>
                <input type="text" ng-model="dbAccount.select"/>
            </td>
            <td>
                <input type="text" ng-model="crAccount.select"/>
            </td>
            <td>
                <input type="text" ng-model="referenceNumber"/>
            </td>
            <td>
                <input type="text" ng-model="dbAccount.debitAmount"/>
            </td>
        </tr>
        <tr>
            <td>
                <input readonly type="text" ng-model="dbAccountname"/>
            </td>
            <td>
                <input readonly type="text" ng-model="crAccountname"/>
            </td>
            <td>
                <input disabled sort type="text" datepicker-pop="dd MMMM yyyy" is-open="opened" ng-model="transDate"/>
            </td>
            <td colspan=2>
                <input type="text" ng-model="comments" ng-keydown="$event.keyCode === 13 && addNewBatchRow($index)"/>
            </td>
        </tr>
    </tbody>
</table>

От контроллера нет данных JSON, но ниже кодов.Ng-repeat должен повторять строки таблицы для ввода, который будет введен из внешнего интерфейса.Любая помощь высоко ценится.

scope.formData.crAccounts = [{}];
scope.formData.dbAccounts = [{}];
scope.numberOfAcceptableRows = 5;

Это добавит новую строку при вводе ключа ввода.

scope.addNewBatchRow = function (index) {
    if(scope.numberOfCreditsDebits <= 1){
    scope.formData.crAccounts.push({});
    scope.formData.dbAccounts.push({});
    scope.numberOfCreditsDebits = scope.numberOfCreditsDebits + 1;
    } else if (scope.numberOfCreditsDebits >= scope.numberOfAcceptableRows){
    scope.error = "Journal entry is limmited to " + scope.numberOfAcceptableRows + " rows.";
    }
};

Answer 1

Может быть, вы можете использовать $index для перебора ваших данных.

var app = angular.module('app', []);
app.controller('TestCtrl', function($scope) {
  $scope.formData = {
    dbAccounts: ['Mike', 'Bob'],
    crAccounts: [231, 239]
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="TestCtrl">
    <table>
      <tr ng-repeat="dbAccount in formData.dbAccounts">
        <td>{{ dbAccount }}</td>
        <td>{{ formData.crAccounts[$index] }}</td>
      </tr>
    </table>
  </div>
</div>

Answer 2

Возможно, вы захотите объединить formData.dbAccounts и formData.crAccounts в один массив, а затем выполнить итерацию по нему с ng-repeat:

var app = angular.module('app', []);
app.controller('TestCtrl', function($scope) {
  var x = ['x_one', 'x_two'];
  var y = ['y_one', 'y_two'];
  $scope.xy = x.map(function(item, index) {
    return { x: item, y: y[index] };
  })
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="TestCtrl">
    <table>
      <tr ng-repeat="item in xy">
        <td>{{ item.x }}</td>
        <td>{{ item.y }}</td>
      </tr>
    </table>
  </div>
</div>