引导表不适用于 ng-repeat答案

【问题标题】：Bootstrap table not working good with ng-repeat引导表不适用于 ng-repeat
【发布时间】：2017-07-07 09:53:00
【问题描述】：

<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 的引导网格系统时，结果很奇怪..

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

【问题讨论】：

在不使用引导类的情况下尝试您的代码。我认为问题可能出在class="row col-md-3"

标签： javascript html angularjs twitter-bootstrap

【解决方案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，您可以使用引导程序 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>

【讨论】：

【解决方案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>

【讨论】：

但是表格显示为全宽我希望它是小表格
一个简单的技巧是将整个表格封装在网格中。 <div class="row><div class="col-md-6"><table ....</table></div></div>

【解决方案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>

【讨论】：

【解决方案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。看看它是否有效。

【讨论】：

【解决方案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>

【讨论】：