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', []);

why to use songInfo directive? u can render it here inside the table instead — X-Coder
– X-Coder, Commented Mar 3, 2016 at 4:10

elisoff · Accepted Answer · 2016-03-03 02:54:30Z

1

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.

answered Mar 3, 2016 at 2:54

elisoff

582 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sdl1099 Over a year ago

Put the "ng-controller" into the <tbody> and it worked! thanks! I will take a look at the directive problem you pointed out.

Mohammad Hafiz · Accepted Answer · 2016-03-03 02:27:27Z

0

    <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>

answered Mar 3, 2016 at 2:27

Mohammad Hafiz

409 bronze badges

2 Comments

sdl1099 Over a year ago

Tried that, still no luck. Thanks though!

Mohammad Hafiz Over a year ago

just put <td>{{ song }}</td> see if the data show or not. if not your controller have problem.

Collectives™ on Stack Overflow

How to display info in bootstrap table with Angularjs

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related