AngularJs e CSS 动态网格条纹表

Question

我想知道在这种情况下，如何在我有一个组和一个子组的地方留下一个条纹表

结果是有些线条重复了颜色，我想知道如何解决这个问题？

html

<tbody ng-repeat="a in group">
<tr ng-class-odd="'striped'">
<td>{{a.Name}}</td>
<td></td>
</tr>
<tr ng-repeat="x in records" ng-class-odd="'striped'">
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>  
</tr>
</tbody>

脚本：

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany"
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria"
    }
  ],
  $scope.group = [
    {
      "Name" : "A"
    },
    {
      "Name" : "B"
    },
    {
      "Name" : "C"
    },
    {
      "Name" : "D"
    }
  ]
});

结果图像

• ng-style：在接收 $index 和 $parent.$index 的 controller 中创建了一个 function 但由于某种原因它重复并重复了循环。
• tbody tr:nth-child(even)：复制颜色；
• tbody tr:nth-child(odd)：复制颜色；
• $first%2 === 0，$last%2 === 0，$even，$odd。 不成功。

Answer 1

ngRepeat 在使用时会创建一个新的 scope。 将striped class 应用于该行时，您正在寻找父转发器的$even或$odd 。 您可以通过在<tr>的属性中或内部的任何地方使用$parent来完成此操作。 像这样：

<tbody ng-repeat="a in group">
    <!-- Always first, so always odd -->
    <tr class="striped">
        <td>{{a.Name}}</td>
        <td></td>
    </tr>
    <!-- offset by static row above, so invert to use even -->
    <tr ng-repeat="x in records" ng-class="{'striped':$parent.$even}">
        <td>{{x.Name}}</td>
        <td>{{x.Country}}</td>  
    </tr>
</tbody>