时间戳

首页 > 解决方案 > Angularjs 使用 ng-class 和 ui-grid 组件

angularjs - Angularjs 使用 ng-class 和 ui-grid 组件

问题描述

我很难让这个工作。我用我的数据库中的数据生成了一个网格，其中一个列我通过将其分配给一个名为“hasError1”的ng-model和另一个由ng-model分配给“hasError2”的特定值来定位它的特定值。如果它们不同，我正在尝试做一个 ng-class 给它一个特定的 css 类。这是我的代码。这个 ui-grid 在我的控制器类中。

 cellTemplate: '<div ng-model="hasError1"></div>'

cellTemplate: '<div ng-model="hasError2" ng-class="{\'amount-error\': hasError1 != hasError2}" </div>'

我将 ng-class 的条件设为 ng-class="{amount-error: hasError1 != hasError2}"

amount-error 是我拥有的一个 css 类，我将边框设置为

border: 1px solid red;
border-right:none;
border-left:none;

我也在下面尝试过，但没有奏效。

ng-class="{1 : \'amount-error\'} [grid.getCellValue(row, grid.columns[index+12]) != grid.getCellValue(row, grid.columns[index+2])]"

标签： angularjs

解决方案

网格有自己的孤立范围，所以你需要使用

grid.appScope

访问您的应用程序范围

例如：

cellTemplate: '<div ng-class="{\'amount-error\': grid.appScope.hasError1 != grid.appScope.hasError2}" </div>'

或者

cellTemplate:'<div ng-class="{\'amount-error\': grid.appScope.hasErrorFunc()}" </div>'

$scope.hasErrorFunc = function(){
     if(comparisonValue1 != comparisonValue2){
          return true;
     } else{
          return false;
     }
}

推荐阅读