Question

我正在尝试从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控制台中看不到我的解决方案中的所有文件和文件夹：

我缺少Batteries文件夹，其中包含我用于表格和访问数据的代码。

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

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

Answer 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的位置。行应该重复，而不是表体，对吧？

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

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

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

1 个答案: