AngularJS ng-repeat没有响应

时间:2016-06-02 09:06:49

标签: angularjs

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head><title> angular js </title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/angular.min.js"></script>

</head>

<body  ng-app="myApp">


<div ng-controller="personCtrl" >
<div class="row">
 <div class="col-md-6">
  <div class="table-responsive">
     <table class="table table-stripped table-hover">
       <thead>
       <tr>
          <th> Artist </th>
          <th> Title </th>
          <th> Genra </th>
          <th> Ratings </th>
       </tr>
   </thead>
      <tbody>
          <tr ng-repeat="song in songs">
             <td>{{ songs.Artist }}</td>
             <td>{{ songs.Title }}</td>
             <td>{{ songs.Genre }}</td>
             <td>{{ songs.Ratings }}</td>
           </tr> 
      </tbody>  

   </table>
                 </div>
             </div>
              </div>
            </div>


<script>

var app = angular.module('myApp', []);

app.controller('personCtrl', function($scope) {


 var songs =     [{Artist:"Kamikazee",Title:"Chicksilog",Genre:"Punk",Ratings:7},
           {Artist:"Hale",Title:"Bakit pa",Genre:"Alternative",Ratings:5},
           ];

$scope.song = songs;

});
</script>

</body>
</html>

美好的一天,我只是想要一个解决方案,或者有人可以找出我的代码有什么问题。这是问题,我想在表格中显示歌曲列表,你可以看到我将列表放在一个名为“歌曲”的变量中。并使用角度控制器来实现它我很确定我的控制器“personCtrl”连接到View html,因为我运行一些测试,一切正常。但是当我使用ng-repeat方法显示表中的列表时,我的View表中没有发生任何问题,问题就从那里开始。谢谢你希望得到答复:)

1 个答案:

答案 0 :(得分:0)

<tr ng-repeat="song in songs">
             <td>{{ song.Artist }}</td>
             <td>{{ song.Title }}</td>
             <td>{{ song.Genre }}</td>
             <td>{{ song.Ratings }}</td>
           </tr> 
歌曲/歌曲:)