0

编辑 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 和 ProductDescription 字段的颜色，根据 RAName 有效地“分组”它们。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"}}

现在，我不需要在第一次通过后观察这些值，它确实正确设置了所有内容，并且最终用户永远不会知道，除非他们打开了开发人员工具/控制台选项卡，但我知道它会窃听 $# %% 出我。我该如何改进/解决这个问题？

4

3 回答 3

1

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

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

第一个和所有赔率将具有“奇数”类，而偶数将具有“偶数”类。

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

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

<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}

如果您想获得不同的结果，请更好地解释您想要什么（也许有一个工作示例），我会改变我的答案

于 2015-12-06T00:53:00.760 回答
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>

编辑：如果您不熟悉它，请添加到模运算符的链接。

于 2015-12-05T21:08:40.340 回答
-1

我没有资格发表评论，这就是我必须写这个答案的原因。

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

于 2018-11-29T19:54:34.940 回答