table 问题中的另一个 Angular ng-repeat 嵌套数据

Question

我一直在努力使用 Angular 的 ng-repeat 在 table 中正确显示我的数据。这应该非常简单，因为那里有很多例子。我认为这个问题与命名空间有关，我在我的 js 文件中使用 self.all 作为我的数据变量。

HTML:

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

    <table st-table="transfers" class="table table-striped">
      <thead>
        <tr ng-repeat="row in transfers.all">
          <td>Period: {{ row.period }}</td>
          <td colspan="2">Upload Date: {{ row.uploadDate | date }}</td>
        </tr>
        <tr ng-repeat="code in transfers.all.sections">
          <td colspan="3">Transfer Code: {{ code.transferCode }}</td>
        </tr>
        <tr>
      </thead>
    </table>
  </div>
</div>

TransferController.js:

angular
  .module("RssTransfers")
  .controller("TransferController", ["$http", "$filter", function($http, $filter) {

    var self = this;
    self.all = [];

    function getTransfers() {
      $http
        .get("http://localhost:3000/transfers/api")
        .then(function(response) {
          self.all = response.data.transfers;
      })
    }

    console.log(self);
    getTransfers();
}]);

示例数据：

[{
"period": 4,
"uploadDate": "2015-11-19T21:00:00.000Z",
"section":[{
  "transferCode": 8675309,
  "details": [
    {
      "voucherNumber": [34, 22],
      "vendor": "jimmy",
      "description": "blah      ",
      "amount": "t        45,555.00"
    }
  ]
}]
},
{
"period": 4,
"uploadDate": "2015-11-19T21:00:00.000Z",
"section":[{
  "transferCode": 45576543,
  "details": [
    {
      "voucherNumber": 22,
      "vendor": "Jonson",
      "description": "trap music      ",
      "amount": "t        12,345.00"
    }
  ]
}]

}]

我试图组装一个 plunker，但由于某种原因无法 Angular 工作。当我运行时，period 和 uploadDate 在页面上呈现正常，但 transferCode 的行根本不呈现。任何帮助将不胜感激;我想这是我的一个简单错误。

编辑： 我的错。我最初放了不正确的样本数据。我没有包含 section 对象。正确型号已上线

Answer 1

您正在遍历 all.transfers 数组的 section，但 all.transfers 没有任何 section 属性。相反，all.transfers 的每个可迭代对象都有一个部分属性.

因此，为了遍历每个可迭代对象的 section 属性，您必须将第二个 ngRepeat 放在第一个 ngRepeat 中，如下所示：

<tr ng-repeat="row in transfers.all">
    <td>Period: {{ row.period }}</td>
    <td colspan="2">Upload Date: {{ row.uploadDate | date }}</td>
    <td ng-repeat="code in row.sections">
        {{code.transferCode}}
    </td>
</tr>

table 问题中的另一个 Angular ng-repeat 嵌套数据

Yet another Angular ng-repeat of nested data in a table issue

javascript

angularjs

angularjs-ng-repeat

smart-table