Question

我正在使用Angular和Smart-Table迭代嵌套的对象数组来填充表格。我能够很容易地得到一些价值，但其他人已经证明是困难的。在下面的示例数据中，您会看到键voucherNumber，vendor，description和amount附加到数组值。它们的相关性使voucherNumber[0]，vendor[0]，description[0]和amount[0]都引用同一文档。

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

我知道这个模型的结构有点复杂，我打算稍后简化一下。有什么方法可以使用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

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

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

Answer 2

你可以改变：

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

表中的Angular ng-repeat用数组迭代键

2 个答案: