How to put multiple class values with multiple conditions in the ng-class of Angular.js?

Question

I am very new to Angular.js. In my project, there are two classes named style1 and style2.

The requirement is applying two styles with ng-class attribute in the template itself. I am not using separate function for this, but a boolean value named 'bool' which is dynamic.

The following are conditions

if (bool) then the style1 & style2 applies
else style1 is applies.

eg:

<input ng-class="something"/>

Each one class value is assigned my cases more than 1 class value is need assign.

How can I put this logic in the ng-class? I tried so many ways but no use.

Possible duplicate of [Adding multiple class using ng-class](https://stackoverflow.com/questions/18871277/adding-multiple-class-using-ng-class) — Vivz, Sep 01 '17 at 06:16
Viz it is not duplicate in your link for each expression each one class value is assigned my cases more than 1 class value is need assign.Any way thanks for your help to edit my query.Thanks for your kind help — SIVAKUMAR.J, Sep 01 '17 at 06:43

score 1 · Accepted Answer · 2017-09-01T06:10:18.860

function TodoCtrl($scope) {
  $scope.bool = true;
}

.style1 {
  color: #f31313;
}

.style2 {
  background-color: #baeae6;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <div ng-class="{'style1 style2' : bool, style1 : !bool}">
      Hello World!
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Sep 01 '17 at 06:09

0

If i understand your question correctly

<div ng-if="thisistrue" ng-class="style1">
  blah
</div>
<div ng-if="otheristrue" ng-class="[style2,style3]">
  blah
</div>

answered Sep 01 '17 at 06:09

netic

2,854
6
28
25

score 0 · Answer 3 · answered Sep 01 '17 at 06:15

You may proceed as follows :

Based on description you provided : style1 is always applied irrespective of the value returned by bool variable(don't know why you named variablebool always use meaningful names like Isstyle2Applied )

Simply apply style1 using class attribute.
Use ng-class for style2 based on your condition.
When condition is true both classes will applied on desired HTML element

function TodoCtrl($scope) {
  $scope.bool = true;
  $scope.bool2 = false;
}

.style1 {
  color: #f31313;
}

.style2 {
  background-color: #baeae6;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <div class='style1' ng-class="{'style2' : bool}">
      Hello World!
    </div>
    <br>
    <div class='style1' ng-class="{'style2' : bool2}">
      Hello World!
    </div>
  </div>
</div>

score 0 · Answer 4 · answered Sep 01 '17 at 06:38

Answer by @anu is fine. But for your condition given; "if(bool) then the style1 & sytle2 applied else style1 is applied."

style1 changes text color style2 changes background color

so, if boolean = true both text and background is applied, if false only text color is applied.

function TodoCtrl($scope) {
  $scope.bool = true;
}

.style1 {
  color: #f31313;
}

.style2 {
  background-color: #baeae6;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <div ng-class="{'style1 style2' : bool, style1 : !bool}">
      Hello World!
    </div>
  </div>
</div>

Enjoy learning 'Angular' :)

How to put multiple class values with multiple conditions in the ng-class of Angular.js?

4 Answers4