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

Question

I am trying to get data from json object and using ng-repeat show that data inside of a HTML table. 我正在尝试从json对象获取数据，并使用ng-repeat将数据显示在HTML表中。

I am getting data with $http and later using ng-repeat for writing the rows of table. 我正在使用$ http获取数据，后来使用ng-repeat写入表行。

This is my json object: 这是我的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"
    }
  ]
}

This is how I am trying to get json into angular variable: 这就是我试图将json转换为角度变量的方式：

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

And this is my HTML for table: 这是我的表格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>

This is the index page where I have calls to different views depending on which link is clicked. 这是索引页面，根据单击的链接，我可以在其中调用不同的视图。 Table content is in first view: 表内容在第一视图中：

<!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>

Data is not shown on the page and I do not get any exception in browser console. 数据未显示在页面上，并且在浏览器控制台中也没有任何异常。

Second problem I have is that I do not see all files and folders from my solution in Chrome console: 我遇到的第二个问题是，我在Chrome控制台中看不到解决方案中的所有文件和文件夹：

I am missing Batteries folder where is the code I am using for my table and accessing to data. 我缺少Batteries文件夹，这是我用于表和访问数据的代码。

So practically I am unable to debug it and try to find some errors. 因此，实际上我无法调试它并尝试查找一些错误。

Does anybody have idea how can I solve Chrome problem and does anybody spots potential errors in code for generating HTML table using angular.js? 是否有人知道如何解决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>

Change the location of the ng-repeat . 更改ng-repeat的位置。 The row should be repeating, not the table body, right? 该行应该重复，而不是表主体，对吗？

As far as the missing folder is concerned, see if you have included the batter.js file in your index.html . 就丢失的文件夹而言，请查看index.html是否包含了batter.js文件。 Or share your index.html code 或分享您的index.html代码

It looks like it should be Batteries/batteriesScript.js in the script tag 看起来在script标签中应该是Batteries/batteriesScript.js

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

问题描述

1 个解决方案

解决方案1
1 2016-09-02 08:06:10

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

问题描述

1 个解决方案

解决方案1 1 2016-09-02 08:06:10

解决方案1
1 2016-09-02 08:06:10