我正在使用 AngularJS 开发一个 Spring 应用程序。我收到了 JS Controller 的响应。我想在页面上以表格形式显示。
devDebtTable是可以从JS Controller 访问页面的对象。
我使用 {{devDebtTable}} 在页面上打印的 JS Controller 的响应(模拟数据)是我想要放入表中的内容:
{"headers":["John","Larry","Steve"],"rows":[["Project1","14 Days","2 Days","1 Day"],["Project2","10 Days","4 Days",""],["Project3","","2 Days","10 Days"]]}
我希望它的格式如下:
Dev 1 Dev 2 Dev 3 Dev 4
Project 1 5 Days 2 Days 2 Days 1 Day
Project 2 5 Days 7 Days 2 Days
Project 3 3 Days 14 Days 12 Days
Project 4 12 Days 14 Days 5 Days
Project 5 33 Days 53 Days 23 Days
这是我迄今为止尝试过的,但不正确。
<div class="container">
<table class="table table-bordered">
<thead>
<tr ng-repeat="data in devDebtTable">
<th scope="colgroup"></th>
<th scope="colgroup" ng-repeat="headers in data">{{headers}}</th>
</tr>
</thead>
<tr ng-repeat="row in devDebtTable.row">
<td>item:{{row}}</td>
<!--<td ng-repeat="item in row">item:{{item}}</td>-->
</tr>
</table>
</div>
昨天我花了 8 个小时尝试不同的事情。我该怎么做才能将该 JSON 响应放入页面上的表格中?
最佳答案
代码中存在一系列错误。请将代码更新为以下内容并尝试
- 删除
ng-repeat="data in devDebtTable"
- 将 header ng-repeat 更新为
ng-repeat="headers in data.headers"
- 将数据 ng-repeat 更新为
ng-repeat="row in devDebtTable.rows"
- 删除
<td>item:{{row}}</td>
取消注释
<td ng-repeat="item in row">item:{{item}}</td>
并删除文本项:<table class="table table-bordered"> <thead> <tr> <th scope="colgroup"></th> <th scope="colgroup" ng-repeat="headers in data.headers">{{headers}}</th> </tr> </thead> <tr ng-repeat="row in devDebtTable.rows"> <td ng-repeat="item in row">{{item}}</td> </tr> </table>
关于javascript - 将 js Controller 的 json 响应显示到 html 表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44137132/