2017-02-09 151 views
0

我想在angular.js的幫助下生成一個表,但我無法做到。我是這個新手。有人可以幫我弄清楚我的代碼有什麼問題嗎?如果這是重複,我很抱歉。ng-repeat沒有顯示數組元素

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
 
    pageEncoding="ISO-8859-1"%> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
<title>Dashboard</title> 
 
<style> 
 
body { 
 
\t width: 80%; 
 
\t margin: 0px auto; 
 
} 
 
table{ 
 
    table-layout:fixed; 
 
    width:100%; 
 
} 
 
#f1 { 
 
\t background-color:#A9A9A9; 
 
\t border-style: solid; 
 
\t border-width: 1px; 
 
\t padding: 20px 0px 20px 20px; 
 
} 
 
.info { 
 
\t color: #A9A9A9; 
 
\t margin: 0px 0px; 
 
\t display: block; 
 
} 
 

 
</style> 
 

 

 
<script> 
 
var app = angular.module('qDashboard',[]); 
 
app.controller('qDashboardController',['$scope', function($scope) { 
 
    $scope.records = [ 
 
     { 
 
      Age: "13", 
 
\t \t \t Title: "Some Title", 
 
\t \t \t Artist: "Artist", 
 
\t \t \t Album : "Album", 
 
\t \t \t Version \t : "Version", 
 
\t \t \t Label: "Label", 
 
\t \t \t 
 
     } 
 
    ]; 
 
}]); 
 
</script> 
 
</head> 
 

 
<body bgcolor="#DCDCDC" ><!--ng-app="Dashboard" >ng-controller="DashboardController" --> 
 

 
<div > 
 
<!-- Logic for refresh button --> 
 

 
<h3>Dashboard</h3> 
 
<br>Showing results of entries <br> 
 
<br> 
 
<button ng-click="">Refresh</button> 
 
<br> 
 
<br> 
 

 
<div ng-app="qDashboard" ><!--ng-controller="qDashboardController" --> 
 
<div ng-controller="qDashboardController" > 
 
\t <table > 
 
\t 
 
\t <tr><th></th><th></th><th></th><th>Spins</th><th>Age</th><th>CCID</th><th>Title</th><th>Artist</th> 
 
\t <th>Album</th><th>Version</th><th>Label</th><th>ISRC</th><th>Quarantine Node</th></tr> 
 
\t \t <tr ng-repeat="x in records"> 
 
\t \t <td ><button ng-click="">Approve</button></td> 
 
\t \t <td ><button ng-click="">Update</button></td> 
 
\t \t <td><button ng-click="">Keep Inactive</button></td> 
 
     <td>{{x.Age}}</td> 
 
     <td>{{x.Title}}</td> 
 
     <td>{{x.Artist}}</td> 
 
     <td>{{x.Album}}</td> 
 
     <td>{{x.Version}}</td> 
 
     <td>{{x.Label}}</td> 
 
     
 

 
\t \t </tr> 
 
\t \t </table> 
 

 

 
\t \t 
 
\t \t 
 
\t \t 
 
</div> 
 
</div> 
 

 

 
</body> 
 
</html>

+1

它顯示。由於它只有一個元素在數組中,因此它只是顯示它。 – Shubhranshu

+0

我認爲你的角腳本src沒有被正確包含,它應該在頭標內 –

+0

我把它放在頭標下只有 – Twisha

回答

0

沒有與你的邏輯沒有問題,請檢查您的角度腳本加載,它包內<head> or <body>

DEMO

var app = angular.module('qDashboard',[]); 
 
app.controller('qDashboardController',['$scope', function($scope) { 
 
    $scope.records = [ 
 
     { 
 
      Age: "13", 
 
\t \t \t Title: "Some Title", 
 
\t \t \t Artist: "Artist", 
 
\t \t \t Album : "Album", 
 
\t \t \t Version \t : "Version", 
 
\t \t \t Label: "Label", 
 
\t \t \t 
 
     } 
 
    ]; 
 
}]);
body { 
 
\t width: 80%; 
 
\t margin: 0px auto; 
 
} 
 
table{ 
 
    table-layout:fixed; 
 
    width:100%; 
 
} 
 
#f1 { 
 
\t background-color:#A9A9A9; 
 
\t border-style: solid; 
 
\t border-width: 1px; 
 
\t padding: 20px 0px 20px 20px; 
 
} 
 
.info { 
 
\t color: #A9A9A9; 
 
\t margin: 0px 0px; 
 
\t display: block; 
 
}
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
<title>Dashboard</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body bgcolor="#DCDCDC" > 
 
<h3>Dashboard</h3> 
 
<br>Showing results of entries <br> 
 
<br> 
 
<button ng-click="">Refresh</button> 
 
<br> 
 
<br> 
 
<div ng-app="qDashboard" > 
 
<div ng-controller="qDashboardController" > 
 
\t <table > \t 
 
\t <tr><th></th><th></th><th></th><th>Spins</th><th>Age</th><th>CCID</th><th>Title</th><th>Artist</th> 
 
\t <th>Album</th><th>Version</th><th>Label</th><th>ISRC</th><th>Quarantine Node</th></tr> 
 
\t \t <tr ng-repeat="x in records"> 
 
\t \t <td ><button ng-click="">Approve</button></td> 
 
\t \t <td ><button ng-click="">Update</button></td> 
 
\t \t <td><button ng-click="">Keep Inactive</button></td> 
 
     <td>{{x.Age}}</td> 
 
     <td>{{x.Title}}</td> 
 
     <td>{{x.Artist}}</td> 
 
     <td>{{x.Album}}</td> 
 
     <td>{{x.Version}}</td> 
 
     <td>{{x.Label}}</td> 
 
    </tr> 
 
\t </table> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

+0

其已經在頭頂。我也嘗試了身體標籤。我仍然無法看到列表 – Twisha

+0

@Twisha檢查我附加的示例,它顯示一個elemeent – Sajeetharan

+0

是的,請你讓我知道你做了什麼改變? – Twisha