![](/img/trans.png)
[英]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.