Question

我有下表，其中有div个元素，这些元素根据数组中的项目数重复进行。

表中只有一个tr，第1和第2 td与行中的第3和第4 td无关。

在td中，我对数组的长度重复div。在图像中，第一列Balance B/d和Income之间的数据是一个数组，而Income有其自己的数组，依此类推。

我已完成此操作，但此操作不起作用，如您在图像中所见。我试图使用shaded-row将ng-class添加到偶数行，但这行不通。

也许我可以做.statement-item:nth-child(even)，但是statement-container有statement-item，必须对其应用阴影行。我应该删除statement-container的父级并执行.statement-item:nth-child(even)还是其他方法？

    <tr>
   <!-- <td class="text-center sl-no-td">{{($index + 1)}}</td> -->
   <td class="v-align-top zeroPadding">
      <!--Receipts-->
      <!--Opening balance-->
      <div ng-show="balanceArray.length" class="statement-container">
         <div class="statement-item">
            <strong>Balance B/d</strong>
         </div>
         <div ng-repeat="subItem in balanceArray" ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}} 
         </div>
      </div>
      <!--End Opening balance-->
      <!--Income-->
      <div ng-show="incomeArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item">
            <strong>Income</strong>
         </div>
         <div ng-repeat="subItem in incomeArrayForReceiptStmt" ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Income-->

      <!--Receipts-->
   </td>
   <td class="journal-type-td v-align-top  zeroPadding">
      <!--Receipts Amount-->
      <!--Opening balance-->
      <div class="statement-item invisible">
         <strong>Balance B/d</strong>
      </div>
      <div ng-show="balanceArray.length" class="statement-container">
         <div ng-repeat="subItem in balanceArray" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.opening_amount | amountFormatFilter}}
         </div>
      </div>
      <!--End Opening balance-->
      <!--Income-->
      <div ng-show="incomeArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Income</strong>
         </div>
         <!-- <strong>Income</strong> -->
         <div ng-repeat="subItem in incomeArrayForReceiptStmt" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.paid | amountFormatFilter}}
         </div>
      </div>
      <!--End Income-->

      <!--Payments Amount-->
   </td>
   <td class="journal-type-td v-align-top  zeroPadding">
      <!--Payments-->
      <!--Expenses-->
      <div ng-show="expenseArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item">
            <strong>Expenses</strong>
         </div>
         <div ng-repeat="subItem in expenseArrayForReceiptStmt"  ng-class="{'shaded-row': $index % 2 == 0}"  class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Expenses-->
      <!--Assets-->
      <div ng-show="assetArray.length" class="statement-container">
         <div class="statement-item">
            <strong>Assets</strong>
         </div>
         <div ng-repeat="subItem in assetArray"  ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Assets-->

      <!--Closing balance-->
      <div ng-show="balanceArray.length" class="statement-container">
         <div class="statement-item">
            <strong>Balance C/d</strong>
         </div>
         <div ng-repeat="subItem in balanceArray"  ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Closing balance-->
      <!--End Payments-->
   </td>
   <td class="journal-type-td v-align-top  zeroPadding">
      <!--Receipts Amount-->
      <!--Expenses-->
      <div ng-show="expenseArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Expense</strong>
         </div>
         <div ng-repeat="subItem in expenseArrayForReceiptStmt" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.paid | amountFormatFilter}}
         </div>
      </div>
      <!--End Expenses-->
      <!--Assets-->
      <div ng-show="assetArray.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Assets</strong>
         </div>
         <div ng-repeat="subItem in assetArray" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.paid | amountFormatFilter}}
         </div>
      </div>
      <!--End Asset-->

      <!--Closing balance-->
      <div ng-show="balanceArray.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Closing</strong>
         </div>
         <div ng-repeat="subItem in balanceArray" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.closing_amount | amountFormatFilter}}
         </div>
      </div>
      <!--End Closing balance-->
      <!--End Payments Amount-->
   </td>
</tr>

Answer 1

这是一个主意，创建一个包含随机颜色数组的函数，然后随机选择一个。如下所示：

addColor() {
    let arr = ['#ffffff', '#000000', '#ff0000', '#00ff00', '#0000ff'];

    let color = arr[Math.floor(Math.random() * arr.length)];

    return color;
}

或者您可以创建一个全局变量数组，其中包含一个看起来像

的对象数组

var arr = [{color: '#fff', used: false}, {color: '#000', used: true}];

然后，您可以创建在该数组上运行for循环的函数：

let color = '';

for(let i = 0; i < arr.length; i++) {
  if(!arr[i].used) {
    arr[i].used = true;
    color = arr[i].color;
    break;
  }
}

return color;

我认为您可以使用类似ng-style="{'background-color' : addColor()}"之类的东西（我不太了解棱角的道歉）。

希望这有助于您为自己滚球。

Answer 2

如果进入第二个中继器，请检查prevoius收集长度，然后根据长度（偶数/奇数）反转ng-class逻辑，例如

balanceArray.length % 2  ===  0 ? $index % 2 == 0 : $index % 2 != 0

btw，如果您没有理由用容器将它们分开，那么最好将所有项目放在一起，并与css（奇/偶）子代做魔术。

连续更改每隔一个div的背景色

2 个答案: