how to write conditional statements in ng-class?

Question

I have written the condition as

ng-class="{true: 'ion-ios-heart', false: 'ion-ios-heart-outline'}[favOffers[offer.id]]"

i.e if favOffers[offer.id] has a value then apply the class in true statement else apply the class in false statement.

But it is not working. favOffers is defined in my controller.

You cannot access a angular object like this. I imagine angular is not qualifying anything after the last `}` too. Is this being used inside an `ng-repeat`? — IronAces, Oct 25 '16 at 10:30
i think i am unable to access favOffers[offer.id] in my template. — abhit, Oct 25 '16 at 10:48

score 5 · Accepted Answer · answered Oct 25 '16 at 10:42

5

You can simply use a ternary condition in your case

<div ng-class="favOffers[offer.id] ? 'ion-ios-heart': 'ion-ios-heart-outline'"></div>

answered Oct 25 '16 at 10:42

taguenizy

2,140
1
8
26

score 2 · Answer 2 · answered Oct 25 '16 at 10:31

2

This should work :

<div ng-class="{'ion-ios-heart' : favOffers[offer.id], 'ion-ios-heart-outline' : !favOffers[offer.id] }>
</div>

answered Oct 25 '16 at 10:31

arthur_sou

21
1

lenilsondc · Answer 3 · 2016-10-25T12:11:05.977

Make sure that favOffers[offer.id] is defined and it's not causing errors and you can use double !! to effort a boolean value in case of undefined like ng-class="{true: 'ion-ios-heart', false: 'ion-ios-heart-outline'}[!!favOffers[offer.id]]".

For example, in the following code snippet there is no isTrue memeber defined, by doing !!isTrue it will always return false if it's not defined, finding the right value even if it's undefined.

angular.module('app', [])
  .controller('myController', function ($scope) {
    //$scope.isTrue = false;
  });

angular.element(document).ready(function () {
  angular.bootstrap(document, ['app']);
});

.bg-green{
  background: green;
}

.bg-red{
  background: red;  
}

.bg-green,
.bg-red{
  padding: 2px 4px;
  margin: 2px 0;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myController">
  <input type="checkbox" ng-model="isTrue" > <tt>isTrue</tt>
  <p>Main solution</p>
  <p ng-class="{ true: 'bg-green', false: 'bg-red' }[!!isTrue]">{ true: 'bg-green', false: 'bg-red' }[!!isTrue]</p>
  <p>Alternative solutions</p>
  <p ng-class="isTrue ? 'bg-green' : 'bg-red'">isTrue ? 'bg-green' : 'bg-red'</p>
  <p ng-class="{ 'bg-green': isTrue, 'bg-red': !isTrue }" >{ 'bg-green': isTrue, 'bg-red': !isTrue }</p>
</div>

score 1 · Answer 4 · answered Oct 25 '16 at 10:33

you can try out directly with object value....here am assuming ion-ios-heart and ion-ios-heart-outline as two classes defined somewhere.

ng-class="{'ion-ios-heart': offer.id!=='null', 'ion-ios-heart-outline': offer.id=='null'}"

try to configure object values according to your requirement.check out this plunker once

score 1 · Answer 5 · edited May 23 '17 at 11:45

For the clarity and readability of the code why don't you use a method in your controller to make this check?

For example

   <div ng-class="{'className':isTestCondition(), 'className1':!isTestCondition()}"</div>

and then in your controller:

  $scope.testCondition = function() {}

There are different ways to check if an Array contains an object. You could find the different ways in this answer.

how to write conditional statements in ng-class?

5 Answers5