Question

我在表中使用Bootstrap提供的表条纹样式。我正在使用角度js来填充数据。它没有以条带格式显示表格。有人可以帮我识别我正在犯的错误吗？

<table class="table table-striped">
  <thead>
    <tr>
      <th>H1</th>
      <th>H2</th>
      <th>H3</th>
      <th>H4</th>
      <th>H5</th>
      <th>H6</th>
    </tr>
  </thead>
  <tbody ng-repeat="e in data.events">
    <tr>
        <td>{{e.e1}}</td>
        <td>{{e.e2}}</td>
        <td>{{e.e3}}</td>
        <td>{{e.e4}}</td>
        <td>{{e.e5}}</td>
        <td>{{e.e6}}</td>
    </tr>
  </tbody>
</table>

Answer 1

我认为你的意思是将ng-repeat放在tr元素而不是body上。你重复了身体而不是行。

Bootstrap交替显示行上的颜色，因为您创建的每个表格都有1行，所以它只显示一种颜色。

Answer 2

我相信你的问题是重复指令的放置。如果你将它移动到你的tr元素，它应该没问题。它就是为事件数组中的每个项创建一个新的tbody元素。由于表条纹交替显示偶数行的背景颜色，并且每个tbody只包含1行，因此您不会看到应用该样式。

<table class="table table-striped">
  <thead>
    <tr>
      <th>H1</th>
      <th>H2</th>
      <th>H3</th>
      <th>H4</th>
      <th>H5</th>
      <th>H6</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="e in data.events">
        <td>{{e.e1}}</td>
        <td>{{e.e2}}</td>
        <td>{{e.e3}}</td>
        <td>{{e.e4}}</td>
        <td>{{e.e5}}</td>
        <td>{{e.e6}}</td>
    </tr>
  </tbody>
</table>

Answer 3

<table class="table table-striped">
  <thead>
    <tr>
      <th>H1</th>
      <th>H2</th>
      <th>H3</th>
      <th>H4</th>
      <th>H5</th>
      <th>H6</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="e in data.events">
        <td>{{e.e1}}</td>
        <td>{{e.e2}}</td>
        <td>{{e.e3}}</td>
        <td>{{e.e4}}</td>
        <td>{{e.e5}}</td>
        <td>{{e.e6}}</td>
    </tr>
  </tbody>
</table>

这应该可以正常工作，但您需要重复表格行<tr＆gt;而不是表格正文<tbody>。

表格条纹与角度js一起使用时不起作用

3 个答案: