Question

我正在使用AngularJS开发Spring应用程序。我有来自JS控制器的响应。我想在页面上的表格中显示。

devDebtTable 是JS控制器页面可访问的对象。

我使用{{devDebtTable}}打印在页面上的JS控制器的响应（模拟数据）是我想要放入表中的：

 {"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响应放到页面上的表中？

Answer 1

代码中存在一系列错误。请将代码更新为以下内容并尝试

删除ng-repeat="data in devDebtTable"
将标题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>

Answer 2

在此示例中，我们为视图创建新模型

＆＃13;

var app = angular.module("app", []);

        app.controller("ctrl", function ($scope) {

            //this is your base model
            $scope.devDebtTable = {
                "headers": ["John", "Larry", "Steve"],
                "rows": [
                    ["Project1", "14 Days", "2 Days", "1 Day"],
                    ["Project2", "10 Days", "4 Days", ""],
                    ["Project3", "", "2 Days", "10 Days"]
                ]
            }

            //we have to create our model

            $scope.table = {
                headers: [],
                projects: []
            }

            angular.forEach($scope.devDebtTable.headers, function (item) {
                var header = { name: item }
                $scope.table.headers.push(header);
            });

            angular.forEach($scope.devDebtTable.rows, function (item, index) {
                var project = {
                    name: item[0],
                    days: []
                }

                for (var i = 0; i < item.length; i++) {
                    if (i > 0) {
                        var newValue = item[i] === "" ? null : item[i];
                        project.days.push(newValue);
                    }
                }

                $scope.table.projects.push(project);
            });

            

        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <title>asd</title>

    <meta charset="utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>

    <table class="table table-bordered">
        <thead>
            <tr>
                <th></th>
                <th ng-repeat="header in table.headers">
                    {{header.name}}
                </th>
            </tr>
        </thead>
        <tbody ng-repeat="project in table.projects">
            <tr>
                <td>{{project.name}}</td>
                <td ng-repeat="day in project.days">
                    {{day}}
                </td>
            </tr>
        </tbody>
    </table>
    </body>
</html>

＆＃13;

将js控制器的json响应显示为html表

2 个答案: