CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrap
Daniel Taub
Daniel Taub

Reputation: 5399

Bootstrap table not working good with ng-repeat

<div ng-controller="reportCtrl">
      <table class="table table-hover">
          <thead class="row col-md-3">
              <tr class="row">
                  <th class="col-md-6">Key </th>
                  <th class="col-md-6"> Value</th>
              </tr>
          </thead>
          <tbody ng-repeat="param in params" class="row col-md-3">
              <tr class="row">
                  <td class="col-md-6 info">{{param.key}}</td>
                  <td class="col-md-6 info">{{param.val}}</td>
              </tr>
          </tbody>
      </table>
</div>

I have this table, when i'm using the bootstrap grid system with ng-repeat the results are very strange.. my Table

I've tried to play with the grid system but it dosent seem that it helps..

Upvotes: 0

Views: 2080

Answers (5)

stars_point
stars_point

Reputation: 106

You may try this code By removing the col-md-3 and style the table with width:auto

<div ng-controller="reportCtrl">
  <table class="table table-hover" style="width:auto">
    <thead class="row ">
      <tr class="row">
        <th class="col-md-6">Key </th>
        <th class="col-md-6"> Value</th>
      </tr>
    </thead>
    <tbody ng-repeat="param in params" class="row ">
      <tr class="row">
        <td class="col-md-6 info">{{param.key}}</td>
        <td class="col-md-6 info">{{param.val}}</td>
      </tr>
    </tbody>
    <tbody ng-repeat="param in params" class="row ">
      <tr class="row">
        <td class="col-md-6 info">{{param.key}}</td>
        <td class="col-md-6 info">{{param.val}}</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 0

Tjaart van der Walt
Tjaart van der Walt

Reputation: 5179

You do not need to add the row col-md-3 classes to the table-body or the row class to the tr elements. Also if you are repeating the items your ng-repeat needs to be on the tr element, if it is on the tbody element you are going to have multiple unnecessary tbody elements.

Please see working example

If you just want a simple table:

<div ng-controller="TestController as vm">
  <table class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <th>Key </th>
        <th> Value</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in vm.items">
        <td>{{$index}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>

JS:

var myApp = angular.module('myApp',[])
.controller('TestController', ['$scope', function($scope) {
  var self = this;

  self.items = ['one', 'two', 'three', 'four'];
}])

If you do not need the table element you can use the bootstrap row and col-* classes

<div class="row">
    <div class="col-sm-6">
      <h1>Key</h1>
    </div>
    <div class="col-sm-6">
      <h1>Value</h1>
    </div>
  </div>
  <div class="row" ng-repeat="item in vm.items">
    <div class="col-sm-6">
      {{$index}}
    </div>
    <div class="col-sm-6">
      {{item}}
    </div>
  </div>

Upvotes: 4

quick_silver009
quick_silver009

Reputation: 628

<div ng-controller="reportCtrl">
  <table class="table table-hover">
     <div class="row col-md-3">
      <thead class="row">
          <tr>
              <th class="col-md-6">Key </th>
              <th class="col-md-6"> Value</th>
          </tr>
      </thead>
      <tbody ng-repeat="param in params">
          <tr class="row">
              <td class="col-md-6 info">{{param.key}}</td>
              <td class="col-md-6 info">{{param.val}}</td>
          </tr>
      </tbody>
    </div>
  </table>

I have made few changes, like covered the entire table into 3 divisions and then
dividing them further into 6-6 for ths and tds. Just see if it works.

Upvotes: 0

shiva krishna
shiva krishna

Reputation: 222

 Remove the bootstrap classes row, col-md-6 in tbody  ,use the below code.. 
 for all medias, it will be resized 

<div ng-controller="reportCtrl" class="table-responsive>
  <table class="table table-hover table-bordered">
      <thead>
          <tr>
              <th>Key </th>
              <th> Value</th>
          </tr>
      </thead>
      <tbody ng-repeat="param in params">
          <tr>
              <td>{{param.key}}</td>
              <td>{{param.val}}</td>
          </tr>
      </tbody>
  </table>
</div>

Upvotes: 0

Popoi Menenet
Popoi Menenet

Reputation: 1058

Try remove the class="row .."

<div ng-controller="reportCtrl">
      <table class="table table-hover">
          <thead>
              <tr>
                  <th>Key </th>
                  <th> Value</th>
              </tr>
          </thead>
          <tbody ng-repeat="param in params">
              <tr>
                  <td>{{param.key}}</td>
                  <td>{{param.val}}</td>
              </tr>
          </tbody>
      </table>
</div>

Upvotes: 0

Related Questions