Question

我正在使用table生成tr行（ng-repeat）每行都有一个隐藏的行，其中包含基于Angular控制器属性的详细信息。

使用ng-if显示/隐藏（由于效果原因，详细信息视图中ng-show不是此选项）

<tr ng-click="select(ceo.name)" ng-repeat-start="ceo in ceos">
    <td>{{ceo.firstname}}</td>
    <td>{{ceo.lastname}}</td>
</tr>
<tr ng-if="selected==ceo.name" ng-click="deselect()" ng-repeat-end>
    <td colspan=2>{{ceo.firstname}} Details</td>
</tr>

问题是：该表使用table table-striped CSS类显示细节时，条纹的顺序会发生偏移，因此细节现在具有下一个ceo行的背景颜色，依此类推。

如何保持背景颜色的顺序并使细节与“主”行具有相同的背景颜色？

应避免嵌套table。

笔走here。

Answer 1

这是：

Codepen ：https://codepen.io/anon/pen/aVEXRw

<强> CSS ：

.table-striped-ang > tbody > tr[data-index="0"] {
    background-color: grey; //rgb(249, 249, 249);
}

<强> HTML ：

<html ng-app="myapp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.js" charset="utf-8"></script>
</head>

<body ng-controller="ctrl">
  <table class="table table-striped-ang">
    <thead>
      <tr>
        <td>Firstname</td>
        <td>Lastname</td>
      </tr>
    </thead>
    <tbody>
      <tr ng-click="select(ceo.name)" data-index="{{$index%2}}" ng-repeat-start="ceo in ceos">
        <td>{{ceo.firstname}}</td>
        <td>{{ceo.lastname}}</td>
      </tr>
      <tr ng-if="selected==ceo.name" data-index="{{$index%2}}" ng-click="deselect()" ng-repeat-end>
        <td colspan=2>{{ceo.firstname}} Details</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

使用ng-if保持引导表条带顺序

1 个答案: