2017-02-09 114 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