舉表不NG-重複工作良好

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-重複的結果是很奇怪的引導電網系統..

我試着與電網系統播放，但dosent似乎是它可以幫助..

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可以使用引導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

嘗試刪除類=「行。」

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