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

が表示されています。配列内に要素が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は、私が添付したサンプルをチェックし、それは1つのelemeentを示します – Sajeetharan

+0

はいあなたはあなたが行った変更が何であるか教えてくださいできますか? – Twisha

関連する問題