使用 angular.js 从 JSON 对象填充 HTML 表答案

【问题标题】：Fill HTML table from JSON object using angular.js使用 angular.js 从 JSON 对象填充 HTML 表
【发布时间】：2016-09-02 08:04:25
【问题描述】：

我正在尝试从 json 对象获取数据并使用 ng-repeat 在 HTML 表中显示该数据。

我正在使用 $http 获取数据，后来使用 ng-repeat 来写入表的行。

这是我的 json 对象：

{
  "tests": [
    {
      "date": "08/02/1999",
      "name": "Test 1",
      "test": "Raven"
    },
    {
      "date": "11/09/1998",
      "name": "Test 2",
      "test": "PCT+"
    },
    {
      "date": "13/01/2005",
      "name": "Test 3",
      "test": "PCT"
    }
  ]
}

这就是我试图将 json 转换为角度变量的方式：

var testApp = angular.module('testApp', []);
testApp.controller('TestListCtrl', function ($scope, $http) {
    $http.get('GlobalData.json').success(function (data) {
        $scope.tests = data;
    });
});

这是我的表格 HTML：

<script src="batteriesScript.js"></script>
<script src="../scripts/angular.min.js"></script>
<table id="results" width="360" border="1">
    <thead>
        <tr>
            <th scope="col" width="120">Date Created</th>
            <th scope="col" width="120">Name</th>
            <th scope="col" width="120">Tests</th>
        </tr>
    </thead>
    <tbody ng:repeat="t in tests">
        <tr>
            <td>{{t.date}}</td>
            <td>{{t.name}}</td>
            <td>{{t.test}}</td>
        </tr>
    </tbody>
</table>

这是索引页面，我根据点击的链接调用不同的视图。表格内容在第一视图中：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
    <title>BatteryApp</title>
    <meta charset="utf-8" />
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-route.min.js"></script>
    <link href="assets/style.css" rel="stylesheet" />
    <script src="scripts/routes.js"></script>
</head>
<body>
    <table style="font-family: Arial">
        <tr>
            <td colspan="2" class="header">
                <h1>
                    Battery Application
                </h1>
            </td>
        </tr>
        <tr>
            <td class="leftMenu">
                <a href="#/home">Home</a>
                <a href="#/addBattery">Add new battery</a>
            </td>
            <td class="mainContent">
                <ng-view></ng-view>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="footer">
                <b>Battery</b>
            </td>
        </tr>
    </table>
</body>
</html>

数据未显示在页面上，我在浏览器控制台中没有收到任何异常。

我遇到的第二个问题是我在 Chrome 控制台中的解决方案中看不到所有文件和文件夹：

我缺少电池文件夹，我用于表和访问数据的代码在哪里。

所以实际上我无法调试它并尝试找出一些错误。

是否有人知道如何解决 Chrome 问题，是否有人发现使用 angular.js 生成 HTML 表格的代码中的潜在错误？

【问题讨论】：

标签： javascript jquery html angularjs json

【解决方案1】：

<table id="results" width="360" border="1">
    <thead>
        <tr>
            <th scope="col" width="120">Date Created</th>
            <th scope="col" width="120">Name</th>
            <th scope="col" width="120">Tests</th>
        </tr>
    </thead>
    <tbody >
        <tr ng-repeat="t in tests">
            <td>{{t.date}}</td>
            <td>{{t.name}}</td>
            <td>{{t.test}}</td>
        </tr>
    </tbody>
</table>

更改ng-repeat 的位置。该行应该是重复的，而不是表体，对吧？

就丢失的文件夹而言，请查看您的index.html 中是否包含batter.js 文件。或分享您的index.html 代码

看起来应该是脚本标签中的Batteries/batteriesScript.js

【讨论】：

是的，你是对的，ng-repeat 的位置是错误的，但表格中仍然没有数据:( @DustinToothless
在script标签里好像应该是Batteries/batteriesScript.js
这有助于在控制台中查看 Batteries 文件夹，现在我可以尝试调试它，看看我是否能正确获取 json 数据:) @DustinToothless