如何使用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在引导表中显示信息

回答

相关问题