如何使用Angularjs在引導表中顯示信息

我試圖通過顯示在index.html中的引導表中的songInfo.js和songInfo.html指令顯示存儲在MainController中的歌曲的信息。現在只有表頭顯示。任何幫助將不勝感激！如何使用Angularjs在引導表中顯示信息

的index.html：

<body ng-app="Hypalytics"> 

     <div class="main" ng-controller="MainController"></div> 
     <div class="container"> 
      <h2 class="table">Hover Rows</h2>   
      <table class="table table-hover"> 
      <thead> 
       <tr> 
       <th>Rank</th> 
       <th>Song</th> 
       <th>Artist</th> 
       <th>Velocity</th> 
       <th>Days on Chart</th> 
       <th>Label</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="song in songs"> 
        <td><song-info info="song"></song-info></td> 
       </tr> 
      </tbody>  
      </table> 
     </div>

MainController：

app.controller('MainController', ['$scope', function($scope) { 
    $scope.songs = [ 
     { 
      title: 'Trap Queen', 
      artist: 'Fetty Wap', 
      label: 'Warner Music', 
      velocity: 3, 
      days: 5, 
      rank: 1, 
     }, 
     { 
      title: 'Sorry', 
      artist: 'Justin Beiber', 
      label: 'Warner Music', 
      velocity: 17, 
      days: 4, 
      rank: 2, 
     }, 
     { 
      title: 'Reaper', 
      artist: 'Sia', 
      label: 'Ultra Records', 
      velocity: 56, 
      days: 7, 
      rank: 3, 
     } 
    ]; 
}]);

songInfo.html：

<td class="rank">{{ song.rank }}</td> 
<td class="title">{{ song.title }}</td> 
<td class="artist">{{ song.artist }}</td> 
<td class="velocity">{{ song.velocity }}</td> 
<td class="days">{{ song.days }}</td> 
<td class="label">{{ song.label }}</td>

songInfo.js

app.directive('songInfo', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      info: '=' 
     }, 
     templateUrl: 'js/directives/songInfo.html' 
    }; 
});

個

app.js

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

來源

2016-03-03 sdl1099

爲什麼要使用songInfo指令？你可以把它在這裏呈現在表格內 –

所以，問題是：具有格「NG控制器」沒有包裝的內容。這樣，您無法訪問MainController，因此「歌曲」爲空。

指令中也存在問題。您正在接收「信息」，但使用模板中的「歌曲」。這不會起作用。

來源

2016-03-03 02:54:30 Esap

把「ng控制器」放入，它工作！謝謝！我會看看你指出的指令問題。 – sdl1099

<div class="main" ng-controller="MainController"></div> 
    <div class="container"> 
     <h2 class="table">Hover Rows</h2>   
     <table class="table table-hover"> 
     <thead> 
      <tr> 
      <th>Rank</th> 
      <th>Song</th> 
      <th>Artist</th> 
      <th>Velocity</th> 
      <th>Days on Chart</th> 
      <th>Label</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="song in songs"> 
       <td>{{ song.rank }}</td> 
       <td>{{ song.title }}</td> 
       <td>{{ song.artist }}</td> 
       <td>{{ song.velocity }}</td> 
       <td>{{ song.days }}</td> 
       <td>{{ song.label }}</td> 
      </tr> 
     </tbody>  
     </table> 
    </div>

來源

2016-03-03 02:27:27

試過，仍然沒有運氣。雖然謝謝！ – sdl1099

只要把{{歌}}看看數據是否顯示。如果不是你的控制器有問題。 –

如何使用Angularjs在引導表中顯示信息

回答

相關問題