[英]src stripped from json html data when using angular.js and angular-sanitize.js
[英]Fill HTML table from JSON object using angular.js
我正在尝试从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表的代码中发现了潜在的错误?
<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
代码
看起来在script标签中应该是Batteries/batteriesScript.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.