-2

I have few style classes defined in my style sheet as like the following:

.left-align{
  /* some styles here */
}
.right-align{
  /* some styles here */
}
.validate-error{
  /* some styles here */
}

Based on the type of data in the class I need to align the content left or right, and also I wanted to call a method which will validate my data in the control, if validation fails need to append the validate-error class as well to the ng-class. I gone through different SO threads and other articles and QA sites that titled as multiple conditions in ng-class but nothing found working in my scenario, I have tried the following based on the references:

ng-class="{!vm.validate()?'validate-error': vm.isNumericField?'right-align':'left-align'}"

But this will not align the content to the right even isNumericField is true when validate() returns false.

In short, I need to add left-align or right-align depends on the isNumericField property and also validate-error if validate() returns false. 

 "isNumericField?{'left-align':'right-align'} + 'validate-error':validate()"

Please anyone let me know if there any way to achieve this:

sujith karivelil
  • 28,671
  • 6
  • 55
  • 88
  • Can't use simple if loop to get the attribute class and change it? something like : if ($scope.isNumericField) $scope.class = "left-align"; else $scope.class = "right-align"; – Hema Nandagopal Jul 04 '17 at 06:03
  • @HemaNandagopal: fine, as of now I'm able to toggle two classes, But I need to find a way to add the second class if `validate()` method returns false. as a result am expecting `ng-class="right-align validate-error"` – sujith karivelil Jul 04 '17 at 06:09
  • In that case you can combine both the classes,$scope.class=" right-align validate-error"; – Hema Nandagopal Jul 04 '17 at 06:12

1 Answers1

1

You can specify "map" of class names to boolean values:

ng-class="{'validate-error': !vm.validate(), 'right-align': vm.isNumericField, 'left-align': !vm.isNumericField}"
Slava Utesinov
  • 13,410
  • 2
  • 19
  • 26