Question

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

我有这张表，当我使用带有ng-repeat的自举网格系统时，结果很奇怪..

我尝试过使用网格系统，但似乎有点帮助..

Answer 1

您不需要将row col-md-3类添加到table-body或row类添加到tr元素。此外，如果您要重复ng-repeat元素所需的tr项，如果它位于tbody元素上，您将拥有多个不必要的tbody元素。

请参阅工作example

如果您只想要一张简单的表格：

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

如果您不需要table element，可以使用bootstrap row和col-*类

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

Answer 2

尝试删除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>

Answer 3

 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>

Answer 4

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

我做了一些改动，比如将整个桌子分成3个分区，然后是将它们进一步划分为6-6为ths和tds。看看它是否有效。

Answer 5

您可以尝试使用此代码删除col-md-3 并使用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>

引导表与ng-repeat不兼容

5 个答案: