Question

我在angular-ui ui-grid中编写了一个很酷的函数，它将动态类应用于列中的行，具体取决于该列中的值。我完成了98.5％，但在软件中，最后1.5％总是最令人沮丧的。这是针对已发送电子邮件的报告，我们希望将75％开放率的邮件设为绿色，将开放率为1％的邮件设为红色，中间值为黄色。我已经通过cellClass函数实现了这个功能，它基本上将行值与列中其余行进行比较，然后给它一个css类。

    cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
      var getColorGroup = function(array, element){
        var colorArray = ["63BE7B", "72C27B", "82C77C", "91CB7D", "A1D07E", "B1D47F", "C0D980", "D0DD81", "DFE282", "EFE683", "FFEB84", "FFDE82", "FED280", "FDC47D", "FDB87B", "FCAA78", "FB9D75", "FB9073", "FA8370", "F9776E", "F8696B"],
            max = Math.max.apply(Math, array),
            min = Math.min.apply(Math, array),
            range = max - min,
            numRows = array.length,
            stepValue = range / 100,
            percent = Math.floor((parseFloat(element) - min) / stepValue),
            color = Math.floor(percent / 100 * (colorArray.length - 1));
        return color;
      };

      var getColumnVals = function(array, column){
        var columnArr = [];
        for(var i = 0, _len = array.length; i < _len; i++){
          columnArr.push(parseFloat(array[i][column]));
        }
        return columnArr;
      };

      var thisRow = grid.getCellValue(row, col);
      //return 'group' + thisRow;
      var asdf = getColumnVals($scope.gridOptions.data, this.name); // "name"
      var qwer = getColorGroup(asdf, thisRow);

      console.log(this.name + " is colored? " + this.isColored); // + coloredColService[this.name] );
      if(coloredColService[this.name]){ //(this.isColored){ 
        return 'group' +  qwer;
      }
    }

以上，我期待着这一点。很多人上升到一个级别。 $ scope.gridOptions.columnDefs是一个POJO数组，我希望this引用该数组中的JSON对象，该对象包含cellClass属性/函数。我知道this指的是因为我正在记录this.name。由于某种原因，它没有看到this.isColored，所以我正在使用服务coloredColService

我有plunkr here

我的目标是能够在列菜单中切换此cellClass。

  menuItems: [
    {
        icon: 'ui-grid-icon-ok',
        title: "Toggle Color",
        action: function(){ 
          alert(this.context.col.colDef.name + " is " + $scope.coloredCols[this.context.col.colDef.name]);
          $scope.coloredCols[this.context.col.colDef.name] = !$scope.coloredCols[this.context.col.colDef.name];
        }
    }],

以上是一般的想法。

这里的主要问题是样式不会消失 - 即使警报确认我已成功将值更改为false。 if语句，用于检查列是否应该是彩色的，但不是在观察服务是否有更改。我之前使用过$ scope.watch，但我不认为我可以在函数中做到这一点，因为它被定义为columnDefs中的属性

当函数定义为属性时，通知函数中角度服务的更改

0 个答案: