ng-class if object exists angularjs

Question

How can we activate class if object exists. i have a json array where i need to activate a class if image_id exists for that particular array.

something like ng-if="data.image_id"  then class get activated

 <div class="test" ng-class="classonimage:data.image_id">
   //showing data

<div>

Here class test is active but classonimage would be activated to modify few css attributes if image_id exists.

So here i want to make some change to story if it contains image. How can we activate ng-class on ng-if. How can we achieve this?

akn · Accepted Answer · 2014-05-15 13:43:49Z

3

Try:

<div class="test" ng-class="{'classonimage':data.image_id}"><div>

It's important to place class name between ' ', because if class name contains - ng-class will not work.

Fiddle: http://jsfiddle.net/YwU77/1/

edited May 15, 2014 at 13:43

answered May 15, 2014 at 13:30

akn

3,7221 gold badge29 silver badges46 bronze badges

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

Comments

Blackhole · Accepted Answer · 2014-05-15 13:30:24Z

2

Check if data.image_id is defined or not, and correct your syntax for ngClass:

<div class="test" ng-class="{classonimage : data.image_id !== undefined}"></div>

answered May 15, 2014 at 13:30

Blackhole

20.5k7 gold badges72 silver badges69 bronze badges

4 Comments

callmekatootie Over a year ago

!== throws an error in the console, at least it used to. It does not seem to like triple equal to either. You have to use != and == (had to, not sure if it was fixed)

Blackhole Over a year ago

@callmekatootie It doesn't anymore, for a long time now!

akn Over a year ago

@Blackhole It will not work if class name is like class-on-image.

Blackhole Over a year ago

@czwek Seems obvious, but it's worth mentioning it.

jackypan1989 · Accepted Answer · 2014-05-15 13:35:41Z

1

Use ng-class="{classonimage:data.image_id} to control the class of this element.

Here is the example plunk :

You will see the class applies the font-size(in style.css) if data.image_id is true.

answered May 15, 2014 at 13:35

jackypan1989

2,8661 gold badge15 silver badges11 bronze badges

Collectives™ on Stack Overflow

ng-class if object exists angularjs

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related