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

【问题标题】：Howto use ng-class-odd and ng-class-even in nested ng-repeat如何在嵌套的 ng-repeat 中使用 ng-class-odd 和 ng-class-even
【发布时间】：2021-09-23 15:50:31
【问题描述】：

我是 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;
}

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

我想要达到的目标：
div -------- 无背景色
div -------- 背景颜色
div -------- 无背景色
div -------- 背景颜色
div -------- 无背景色
div -------- 背景颜色

我得到了什么：
div -------- 无背景色
div -------- 背景颜色
div -------- 无背景色
div -------- 没有背景颜色（第二次 ng-repeat 的问题是第二次出现并且没有应用 CSS，因为它是均匀的）
div -------- 背景颜色
div -------- 没有背景色

任何建议将不胜感激。

【问题讨论】：

标签： html angularjs css

【解决方案1】：

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

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

然后在您的$scope 或controller 中创建一个自定义函数isOdd()（例如），它将接收两个参数：$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 中是一个很好的做法）。

【讨论】：

【解决方案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。

【讨论】：

【解决方案3】：

嵌套在您的 ng-repeat 中的是：

ng-style="(($index%2) === 0) ? {'background-color':'none'}:{'background-color':'red'}"

此解决方案利用了您的 ng-repeat 包含 $index 的事实。使用模数得到偶数或奇数。

另外，由于中继器带有 $even 和 $odd。做

ng-style="$even ? {'background-color':'none'}:{'background-color':'red'}"

或

ng-style=" $even ? evenStyle : oddStyle "

在哪里控制器中的 evenStyle 和 oddStyle 类似于：

$scope.evenStyle = {'background-color':'none'};
$scope.oddStyle  = {'background-color':'red'};

你会为 ng-class 使用相同的逻辑如在 ng-class= $ 偶数？ myEvenClass : myOddClass;

【讨论】：