我正在尝试从 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 放入 Angular 变量的方式:
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>
这是索引页面，根据单击的链接，我可以调用不同的 View 。表格内容为第一 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>
数据未显示在页面上，并且我在浏览器控制台中没有收到任何异常。
我遇到的第二个问题是我在 Chrome 控制台中看不到解决方案中的所有文件和文件夹:
我缺少 Batteries 文件夹，其中有我用于表和访问数据的代码。
所以实际上我无法调试它并尝试找到一些错误。
有人知道如何解决 Chrome 问题吗？有人发现使用 angular.js 生成 HTML 表的代码中存在潜在错误吗？
最佳答案
<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
关于javascript - 使用 angular.js 从 JSON 对象填充 HTML 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39287313/