Search code examples
javascripthtmlangularjstwitter-bootstrapbootstrap-table

Html bootstrap table not appearing on screen

I am having trouble displaying a table in html. When I hardcode values in the table they appear but when using angularjs they do not appear. So I think the problem has to do with something in angualrjs. Here is my html code that I am trying to display:

 <div class="container">
 <h2>Hover Rows</h2>
 <p>The .table-hover class enables a hover state on table rows:</p>            
 <table class="table table-hover">
 <thead>
  <tr>
    <th>Friends</th>
  </tr>
 </thead>
 <tbody>
    <tr ng-repeat="Friends in AllUsersFriends">
        <td>{{Friends}}</td>
  </tr>
 </tbody>
 </table>
 </div>

Here is my controller.js code:

    socket.on("AllFriends",function (Friends){
  $log.log('so the friends are');
  $scope.AllUsersFriends=Friends;
  console.log($scope.AllUsersFriends);
  $scope.$apply();
});

I am receiving an array via flask-socketio and then I set that array to my $scope.AllUsersFriends array I created. I see the data in the console but no rows appear on the screen. How do I get my data to appear on the screen? Thanks.

Solution

  • Check this out: 

    <html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

 <table class="table table-hover">
    <tr><th>Friends</th></tr>
    <tr ng-repeat="x in friends"><td>{{x.name}}</td></tr>
 </table>

<script>
//App declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.friends = [{name: "Peter"},{name:"Laila"},{name:"Rosy"}];

});

</script>
</body> 
</html>

    Hope, it solves!