Angular ng-repeat in table 用数组迭代键

Question

我正在使用 Angular 和 Smart-Table 来遍历嵌套的对象数组以填充 table。我能够轻松地得出一些值，但事实证明其他值很困难。在下面的示例数据中，您会看到键 voucherNumber、vendor、description 和 amount 附加到数组值。它们的关联方式是 voucherNumber[0]、vendor[0]、description[0] 和 amount[0] 都引用同一个文档。

目前，我下面的代码正确显示了 period、uploadDate 和 transferCode。其余的它只显示数组（例如，在 voucherNumber 下有两个 table 单元格，一个包含 ["34", "22"] 和另一个 ["12", "32"].

我知道这个模型的结构有点复杂，我打算稍后再简化一下。有什么方法可以让我暂时在 table 中正确显示 ng-repeat 吗？

//Sample Code
[{
    "period": 4,
    "uploadDate": "2015-11-19T21:00:00.000Z",
    "section":[{
      "transferCode": 8675309,
      "details": [
        {
          "voucherNumber": ["34", "22"],
          "vendor": ["jimmy", "jonny"],
          "description": ["blah", "blah2"],
          "amount": [45555, 3421]
        }
      ]
    }]
  },
  {
    "period": 4,
    "uploadDate": "2015-11-19T21:00:00.000Z",
    "section":[{
      "transferCode": 45576543,
      "details": [
        {
          "voucherNumber": ["12", "32"],
          "vendor": ["jane", "sarah"],
          "description": ["eep", "orp"],
          "amount": [97864, 23214]
        }
      ]
    }]

  }]

//HTML and Angular

<div class="container">
  <div ng-controller="TransferController as transfers">

    <table st-table="transfers" class="table table-striped">
      <thead>
        <tr>
          <th st-sort="period">Period</th>
          <th st-sort="uploadDate">Upload Date</th>
          <th st-sort="uploadDate">Transfer Code</th>
          <th st-sort="vendor">Vendor</th>
          <th st-sort="description">Description</th>
          <th st-sort="amount">Amount (SSP)</th>
        </tr>
        <tr>
        <tr>
          <th colspan="4">
            <input st-search placeholder="global search" class="input-sm form-control" type="search"/>
          </th>
        </tr>
          <th>
            <input st-search="period" placeholder="search by period" class="input-sm form-control" type="search"/>
          </th>
          <th>
            <input st-search="uploadDate" placeholder="search by upload date" class="input-sm form-control" type="search"/>
          </th> 
          <th>
            <input st-search="transferCode" placeholder="search by transfer code" class="input-sm form-control" type="search"/>
          </th>
          <th>
            <input st-search="vendor" placeholder="search by vendor" class="input-sm form-control" type="search"/>
          </th>
          <th>
            <input st-search="description" placeholder="search by description" class="input-sm form-control" type="search"/>
          </th>
          <th>
            <input st-search="amount" placeholder="search by amount" class="input-sm form-control" type="search"/>
          </th>
        </tr>
      </thead>
      <tbody ng-repeat="toplevel in transfers.all">
        <tr ng-repeat="code in toplevel.section">
          <td>{{ toplevel.period }}</td>
          <td>{{ toplevel.uploadDate | date }}</td>
          <td>{{ code.transferCode }}</td>
          <td  ng-repeat="detail in code.details">{{ detail.amount }}</td>
          <td  ng-repeat="detail in code.details">{{ detail.description }}</td>
          <td  ng-repeat="detail in code.details">{{ detail.amount }}</td>
        </tr>
      </tbody>

    </table>
  </div>
</div>

Answer 1

您可以更改：

<td  ng-repeat="detail in code.details">{{ detail.amount }}</td>

至

<td  ng-repeat="detail in code.details">
       <span ng-repeat="amount in detail.amount">{{ amount }}</span>
</td>

Answer 2

这应该可以帮助您更好地了解它：https://jsfiddle.net/92wqs2sh/1/

概念是一样的，我相当确定您可以用适当的 td 元素替换 div 元素而不用大惊小怪。

Angular ng-repeat in table 用数组迭代键

Angular ng-repeat in table to iterate over key with array

javascript

arrays

angularjs

smart-table