ng-repeat 不显示数组元素

Question

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

<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>

Answer 1

你的逻辑没有问题，检查你的angular脚本是否正在加载，把它包在<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>

ng-repeat 不显示数组元素

ng-repeat not showing elements of array

angularjs

ng-repeat