Angularjs Using ng-class with ui-grid component

Question

I'm having difficulty trying to get this working. I have a grid being generated with data from my db and one of columns i targeted its specific value by assigning it to a ng-model called "hasError1" and another assigned by ng-model to "hasError2". I'm trying to do an ng-class if they are different to give it a specific css class. Here is my code. This ui-grid is in my controller class.

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

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

I put my condition for ng-class to be ng-class="{amount-error: hasError1 != hasError2}"

amount-error is a css class that i have which i set the border to be

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

I have also tried this below but that didn't work.

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

Hi and welcome to StackOverflow. And what is the exact problem? Is the bindings work? Is the second cell getting the class? — Mosh Feu
– Mosh Feu, Commented Oct 10, 2018 at 14:49
Hello Mosh Feu, thanks for replying back. It doesn't execute anything my row is still being displayed but no css is being applied even though hasError1 is not equal to hasError2. — Richard Jimenez
– Richard Jimenez, Commented Oct 10, 2018 at 14:55
Is the row has the class amount-error I'm trying to understand if the problem is with the angular part or the css part. What is the chance that you can create a runnable (it can be simpler example that just reproduce the issue - you can fill the data hardcoded). — Mosh Feu
– Mosh Feu, Commented Oct 10, 2018 at 15:02
Unfortunately I cannot provide exact code since some of it is confidential. :/ am I doing my ng-class expression correctly?? — Richard Jimenez
– Richard Jimenez, Commented Oct 10, 2018 at 16:02
Actually yes, but you are not closing the second div. Add > after ng-class="{\'amount-error\': hasError1 != hasError2}". Probably it's not the problem.. — Mosh Feu
– Mosh Feu, Commented Oct 10, 2018 at 16:48

Santhoshkumar · Accepted Answer · 2018-10-12 14:17:43Z

1

The grid has its own isaloted scope, so you need to use

grid.appScope

to access your application scope

For Example:

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

or

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

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

edited Oct 12, 2018 at 14:17

answered Oct 12, 2018 at 13:37

Santhoshkumar

7801 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Richard Jimenez Over a year ago

Thank you for commenting on this post. its greatly appreciated. I tried your answer and it still didn't work. I didn't get no error but it didn't apply the css \'amount-error\' if they weren't equal.

Richard Jimenez Over a year ago

This is what I have cellTemplate: '<div class="ui-grid-cell-contents ui-grid-column-align-right" ng-model="hasError2" ng-class="{\'amount-error\': grid.appScope.hasError1 !== grid.appScope.hasError2}" ng-click="grid.appScope.comparison(grid.getCellValue(row, grid.columns[index+2]), grid.getCellValue(row, grid.columns[index+12]))">{{grid.getCellValue(row, col) | currency:grid.appScope.uiCulture.currencySign:2}}</div>'

Santhoshkumar Over a year ago

what is the value of hasError1 and hasError2?

Richard Jimenez Over a year ago

i did ng-model for that specific cell template to be either hasError1 or hasError2. so for the cell amount I wrote an ng-model = "hasError2" but I don't think that works because I passed it in a function in ng-click but it didn't print out anything. The only way I can get the values I want is doing this ng-click="grid.appScope.comparison(grid.getCellValue(row, grid.columns[index+2]), grid.getCellValue(row, grid.columns[index+12]))

Richard Jimenez Over a year ago

ng-click="grid.appScope.comparison(grid.getCellValue(row, grid.columns[index+2]), grid.getCellValue(row, grid.columns[index+12]))" . that gets my the values I want but i can't write those values inside a ng-class and compare them to see if they are equal or not. don't know why.

|

Collectives™ on Stack Overflow

Angularjs Using ng-class with ui-grid component

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related