Question

我是angularjs的新手。

我需要在嵌套的ng-repeat中更改div的CSS。

我的HTML：

<div ng-repeat="aObjects in a">
  <div class="alternateCSS" ng-repeat="b in aObjects">
    <div> some elements </div>
  </div>
</div>

我的CSS：

.alternateCSS:nth-child(odd){  
  background-color: #someColor;
}

上面的代码，对第二个ng-repeat中的所有奇数div应用CSS（假设最后一个div是偶数，CSS不在循环中应用），但是当第二个ng-repeat退出并转到第一个ng-repeat时，再次来到第二次ng重复，然后迭代第一次div不应用CSS。

我想要实现的目标：
  div --------没有背景颜色
  div --------背景颜色
  div --------没有背景颜色
  div --------背景颜色
  div --------没有背景颜色
  div --------背景颜色

我得到了什么：
  div --------没有背景颜色
  div --------背景颜色
  div --------没有背景颜色
  div --------没有背景颜色（第二次出现第二次重复的问题而且没有应用CSS，因为它是偶数）
div --------背景颜色
  div --------没有背景颜色

任何建议都将受到赞赏。

Answer 1

首先创建aObjects数组的map，它将存储其元素长度：

$scope.aMap = $scope.aObjects.map((a) => {return a.length});// mapping rows to their length

然后在isOdd()或$scope中创建一个自定义函数controller，它将收到两个参数：$parent.$index和$index。如果当前子元素分别为奇数或偶数，则此函数应返回true或false。以下是此类功能的示例：

$scope.isOdd = function(rowIndex, index){
  let pos = 0;
  for (let i = 0; i < rowIndex; i++){
    pos += $scope.aMap[i]; // counting summary length of previous rows
  }
  pos += index + 1; // global child element position
  return (pos % 2 === 0); // true if odd
};

以下是您的模板示例：

<div class="parent-row" ng-repeat="a in aObjects">
  <span>Row {{$index + 1}}</span>
  <div 
    class='child-element' 
    ng-class="{'child-element__odd': isOdd($parent.$index, $index)}" <!-- if odd add class -->
    ng-repeat="b in a"
  >
    Child element
  </div>
</div>

然后只为child-element__odd类创建一个样式规则。

这是我的 working plunker example （请注意，我使用controller对象来存储变量而不是$scope，这是Angular中的一个好习惯。

Answer 2

你不一定要使用ng-class-odd和/或ng-class-even，而是简单的ng-class，其功能实际上是告诉当前元素是奇数还是基于所有内部数组的总长度。

该功能可以是：

$scope.checkOdd = function(parrentIndex, index) {
    var totalLength = 0;
    var i = 0;
    for (i; i < parrentIndex; i++) {
      totalLength += $scope.a[i].length;
    };

    totalLength += (index + 1);

    //Here we tell if it is odd within all arrays.
    return (totalLength % 2 == 1);
  }

然后在你看来：

ng-class="{'myClass':checkOdd($parent.$index, $index)}"

显然你的css：

.myClass{  
/**My great class**/
}

这是我为你创建的plunker。

如何在嵌套的ng-repeat中使用ng-class-odd和ng-class-even

2 个答案: