ng-repeat不显示数组元素

时间:2017-02-09 12:09:12

标签: angularjs ng-repeat

我试图在angular.js的帮助下生成一个表,但我无法做到。我是这个的新手。有人可以帮我弄清楚我的代码有什么问题吗?如果这是重复,我很抱歉。



<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 {
	width: 80%;
	margin: 0px auto;
}
table{
  table-layout:fixed;
  width:100%;
}
#f1 {
	background-color:#A9A9A9;
	border-style: solid;
	border-width: 1px;
	padding: 20px 0px 20px 20px;
}
.info { 
	color: #A9A9A9;
	margin: 0px 0px; 
	display: block;
}

</style>


<script>
var app = angular.module('qDashboard',[]);
app.controller('qDashboardController',['$scope', function($scope) {
    $scope.records = [
       {
            Age: "13",
			Title: "Some Title",
			Artist: "Artist",
			Album : "Album",
			Version	: "Version",
			Label: "Label",
			
        }
    ];
}]);
</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" >
	<table >
	
	<tr><th></th><th></th><th></th><th>Spins</th><th>Age</th><th>CCID</th><th>Title</th><th>Artist</th>
	<th>Album</th><th>Version</th><th>Label</th><th>ISRC</th><th>Quarantine Node</th></tr>
		<tr  ng-repeat="x in records">
		<td ><button ng-click="">Approve</button></td>
		<td ><button ng-click="">Update</button></td>
		<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>
		</table>


		
		
		
</div>
</div>


</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您的逻辑没有问题,请检查您的角度脚本是否正在加载,将其包装在 <head> or <body>

<强>样本

var app = angular.module('qDashboard',[]);
app.controller('qDashboardController',['$scope', function($scope) {
    $scope.records = [
       {
            Age: "13",
			Title: "Some Title",
			Artist: "Artist",
			Album : "Album",
			Version	: "Version",
			Label: "Label",
			
        }
    ];
}]);
body {
	width: 80%;
	margin: 0px auto;
}
table{
  table-layout:fixed;
  width:100%;
}
#f1 {
	background-color:#A9A9A9;
	border-style: solid;
	border-width: 1px;
	padding: 20px 0px 20px 20px;
}
.info { 
	color: #A9A9A9;
	margin: 0px 0px; 
	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" >
	<table >	
	<tr><th></th><th></th><th></th><th>Spins</th><th>Age</th><th>CCID</th><th>Title</th><th>Artist</th>
	<th>Album</th><th>Version</th><th>Label</th><th>ISRC</th><th>Quarantine Node</th></tr>
		<tr  ng-repeat="x in records">
		<td ><button ng-click="">Approve</button></td>
		<td ><button ng-click="">Update</button></td>
		<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>
	</table>
</div>
</div>
</body>
</html>