根据先前 row/field 的值替换行颜色/改进现有解决方案

Question

编辑 2（答案）： 对于遇到此问题并寻找类似问题的解决方案的任何人，解决方案都在 Gianmarco 的回答下的评论中。 productusage 数组使用与下面的 $scope.alternate 函数相同的函数进行预处理，结果用于在数组中的每个项目上设置一个 isAlternate 标志。然后在 ng-style 或 ng-class 属性中使用它来确定要在行上使用的样式。

编辑： 为清楚起见：我有一组 RANames 可能去的地方... RAFoo、RAFoo、RABar、RABar、RABar、RABar、RABaz、RABaz、RABaz 等...而且我不希望该行在遇到新的 RAName 之前改变颜色。 具有相同 RAName 的 RAName 值的数量是可变的，因此可能有 2 个 "RAFoo"、4 个 "RABar" 和 3 个 "RABaz"，等等。它可以改变向上.

我的控制器中有以下代码：

var prevRAName = ""; // intialize prevRAName to empty string
var switchColor = false; 

...

$scope.alternate = function (currRAName) {
        if (prevRAName) { // starts on 2nd row...
            if (currRAName == prevRAName) {
                prevRAName = currRAName;
            } else {
                switchColor = !switchColor;
                prevRAName = currRAName;
            }

        } else {
            prevRAName = currRAName;  // hits on the first row ...
        }

        return switchColor;
    }

在模板中我有：

<tr ng-repeat="item in productusage | orderBy : ['RAName','PeriodStart']">
    <td ng-style="alternate(item.RAName)  ? {'background-color':'#f5f5f5'} : {'background-color':'white'}">{{item.RAName}}</td>
    <td ng-style="alternate(item.RAName)  ? {'background-color':'#f5f5f5'} : {'background-color':'white'}">{{item.ProductDescription}}</td>
    <td ng-style="{'background-color': '#' + intToRGB(hashCode(item.PeriodStart)), 'color' : 'white'}">{{item.PeriodCaseCt}}</td>
    <td ng-style="{'background-color': '#' + intToRGB(hashCode(item.PeriodStart)), 'color' : 'white'}">{{item.PeriodStart | date : format : shortDate}}</td>
</tr>

我想根据 RAName 交替 table 的 RAName 和 ProductDescription 字段的颜色，实际上 "grouping" 它们。 PeriodCaseCt 和 PeriodCaseCt 字段采用颜色编码。现在一切正常，我希望故事到此结束，但是我收到了一堆这样的错误：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"alternate(item.RAName) ? {'background-color':'#f5f5f5'} : {'background-color':'white'}","newVal":{"background-color":"white"},"oldVal":{"background-color":"#f5f5f5"}}

现在，我不需要在第一次通过后查看这些值，它确实正确设置了所有内容，最终用户永远不会知道，除非他们打开了开发人员 tools/console 选项卡，但我知道它会窃听我的 $#%%。我怎么能improve/fix这个？

Answer 1

着眼于着色问题，您有几种选择。 ng-repeat 公开一个 $index ，它将为您提供您正在迭代的项目的当前索引。这很有用，因为您可以将它传递给范围内的函数，或直接使用它。

  <div ng-repeat="thing in things track by $index">
    <div ng-style="{ 'color': $index % 2 ? 'red' : 'blue' }">{{ thing }}</div>
  </div>

或者，就像我说的，您可以在作用域上使用函数并将索引传递给它，如下所示：

  $scope.colorAlternate = function(index) {
    var color1 = 'red'
    var color2 = 'blue'
    return (index % 2) ? color1 : color2;
  }

然后在您的 ng-style 中访问它。如果你想交换的不仅仅是一种颜色，你也可以使用 ng-class。

  <div ng-repeat="thing in things track by $index">
    <div ng-style="{ 'color': colorAlternate($index) }">{{ thing }}</div>
  </div>

编辑：向模运算符添加 link 以防您不熟悉它。

Answer 2

您可以对 ng-repeat 循环中的奇数和偶数元素使用 ng-class-odd 和 ng-class-even。

<ol>
  <li ng-repeat="obj in objects">
   <span ng-class-odd="'odd'" ng-class-even="'even'">
     {{obj}}
   </span>
  </li>
</ol>

第一个和所有赔率将有 'odd' class 而偶数将有 'even' class.

在每个 class 中，您可以插入任何您想要的属性。

在你的情况下，你可以这样做：

<tr ng-repeat="item in productusage | orderBy : ['RAName','PeriodStart']" ng-class-odd="'odd'" ng-class-even="'even'">
    <td>{{item.RAName}}</td>
    <td>{{item.ProductDescription}}</td>
    <td ng-style="{'background-color': '#' + intToRGB(hashCode(item.PeriodStart)), 'color' : 'white'}">{{item.PeriodCaseCt}}</td>
    <td ng-style="{'background-color': '#' + intToRGB(hashCode(item.PeriodStart)), 'color' : 'white'}">{{item.PeriodStart | date : format : shortDate}}</td>
</tr>

而 CSS 将是：

.odd td{background-color:#f5f5f5}
.even td{background-color:white}

如果你想得到不同的结果，请更好地解释你想要什么（也许用一个有效的例子），我会改变我的答案

Answer 3

我没有资格发表评论，所以我必须写这个答案。

给出的解决方案是可以使用标志来显示行。添加到 table 数据的标志一切正常。但是，当用户在 GUI 上对 table 进行排序并且 table 被重新排序时，就会出现问题。

根据先前 row/field 的值替换行颜色/改进现有解决方案

Alternate row color based on previous row/field's value / Improve existing solution

angularjs

angularjs-ng-repeat

angularjs-ng-style