一个表格行 (tr) 中的两个 ng 重复

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

您可能

希望将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>

Answer 2

也许您可以使用$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>