How to display info in bootstrap table with Angularjs
Question
I'm trying to display information about songs stored in the MainController via songInfo.js and songInfo.html directives displaying into a bootstrap table in index.html. Right now only the table headers are displaying. Any help would be greatly appreciated!
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', []);
2 answers
solution1
1 ACCPTED 2016-03-03 02:54:30
So, the problem is: the div that has "ng-controller" is not wrapping the content. That way, you don't have access to the MainController and thus "songs" is empty.
There is also a problem in the directive. You are receiving "info" but using "song" in the template. That won't work as well.
solution2
0 2016-03-03 02:27:27
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.