javascript - 使用 angularjs ng-repeat 指令在 HTML 表中显示 JSON 数据

Question

我在使用 Angular js ng-repeat 指令在 html 表中显示以下 json 数据时遇到问题

<thead>
 <tr>
  <th ng-repeat="(header, value) in gridheader">{{value}}</th>
 </tr>
</thead>
<tbody>
 <tr ng-repeat="row  in data">
      <span ng-repeat="r  in row track by $index" >
  <td>{{row[r].TrnId}}</td>
  <td>{{row[r].TrnDate}}</td>
  <td>{{row[r].SavingsMonth}}</td>
  <td>{{row[r].SavingsYear}}</td>
  <td>{{row[r].AccountName}}</td>
  <td>{{row[r].SavingsAdded}}</td>
  <td>{{row[r].SavingsRemoved}}</td>
  <td>{{row[r].SavingsRunningBalance}}</td>
      </span>
 </tr>
</tbody>

我从 Angular JS Controller 中选取此 Json 数据，从解析对象返回的数据如下所示。这确实让我花了很多不眠之夜来解读，但一切都是徒劳的 Json 数据:

   {
"rows": [
    {
        "TrnId": 217,
        "TrnDate": "2016-12-30T21:00:00.000Z",
        "SavingsMonth": "DECEMBER",
        "SavingsYear": "2016",
        "AccountName": "ABELUN STEPHENSON",
        "SavingsAdded": "3100000.0",
        "SavingsRemoved": "50000",
        "SavingsRunningBalance": "3050000"
    },
    {
        "TrnId": 218,
        "TrnDate": "2016-12-30T21:00:00.000Z",
        "SavingsMonth": "DECEMBER",
        "SavingsYear": "2016",
        "AccountName": "ACAN MOLLY NINA",
        "SavingsAdded": "3100000.0",
        "SavingsRemoved": "50000",
        "SavingsRunningBalance": "3050000"
    },
    {
        "TrnId": 219,
        "TrnDate": "2016-12-30T21:00:00.000Z",
        "SavingsMonth": "DECEMBER",
        "SavingsYear": "2016",
        "AccountName": "ADONYO HARRIET TIWAALI",
        "SavingsAdded": "5100000.0",
        "SavingsRemoved": "-",
        "SavingsRunningBalance": "5100000"
    },

    {
        "TrnId": 6558,
        "TrnDate": "2018-12-30T21:00:00.000Z",
        "SavingsMonth": "DECEMBER",
        "SavingsYear": "2018",
        "AccountName": "SANYA BRIAN",
        "SavingsAdded": "-",
        "SavingsRemoved": "45000.0",
        "SavingsRunningBalance": "205000.0"
    }
]
}

我已经尝试了所有可能的方法，但没有成功

Answer 1

假设您的 json 存储在 Controller 中的变量 $scope.data 中，则以下代码应该有效:

 <thead>
 <tr>
  <th ng-repeat="(header, value) in gridheader">{{value}}</th>
 </tr>
</thead>
<tbody>
 <tr ng-repeat="row  in data.rows">
  <td>{{row.TrnId}}</td>
  <td>{{row.TrnDate}}</td>
  <td>{{row.SavingsMonth}}</td>
  <td>{{row.SavingsYear}}</td>
  <td>{{row.AccountName}}</td>
  <td>{{row.SavingsAdded}}</td>
  <td>{{row.SavingsRemoved}}</td>
  <td>{{row.SavingsRunningBalance}}</td>
 </tr>
</tbody>