使用angular.js從JSON對象填充HTML表格

我想從json對象獲取數據並使用ng-repeat顯示HTML表格中的數據。使用angular.js從JSON對象填充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的控制檯解決方案：

我缺少的是代碼我在哪裏電瓶夾用於我的表格和訪問數據。

所以實際上我無法調試它，並試圖找到一些錯誤。

有沒有人有想法我該如何解決Chrome問題，並確實有人在使用angular.js生成HTML表的代碼中發現潛在的錯誤？

來源

2016-09-02 nemo_87

<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

來源

2016-09-02 08:06:10 nikjohn

是的，你是對的，地方NG重複是錯誤的，但在表中還沒有數據:(@DustinToothless –

它看起來像它應該是腳本標記中的'Batteries/batteriesScript.js' – nikjohn

這有助於在控制檯中看到Batteries文件夾，現在我可以嘗試調試它，看看我是否正確地獲取json數據:) @DustinToothless –

使用angular.js從JSON對象填充HTML表格

回答

相關問題