Заполнить таблицу HTML из объекта JSON, используя angular.js

Question

Заполнить таблицу HTML из объекта JSON, используя angular.js

0

Я пытаюсь получить данные из объекта 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, и кто-нибудь видит потенциальные ошибки в коде для генерации таблицы HTML с помощью angular.js?

nemo_87 02 сен. 2016, в 10:31

Источник

Теги:

javascript

jquery

html

angularjs

json

1 ответ

Ещё вопросы

nikjohn · Answer 1 · 2016-09-02T05-16-00.000Z

<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 файл batter.js в свой index.html. Или поделитесь своим кодом index.html

Похоже, что в теге скрипта должны быть Batteries/batteriesScript.js

Да, вы были правы, место для ng-repeat было неверным, но в таблице все еще нет данных :( @DustinToothless
Похоже, это должен быть Batteries/batteriesScript.js в теге script
Это помогло увидеть папку «Батареи» в консоли, теперь я могу попробовать отладить ее и посмотреть, правильно ли я получаю данные json :) @DustinToothless