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

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

Answer 1

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

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

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

Answer 2

关注着色问题，您有几个选择。 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 3

我没有资格发表评论，这就是为什么我必须写这个答案。

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

基于前一行/字段值的备用行颜色/改进现有解决方案

3 个答案: