using ng-class with angular $scope property

Question

I have html structure

<div class="myDiv">
   <div style="width:200px; height:200px;background-image:url('img/200x200/{{largeImg}}.png');"
      ng-class="{'magictime foolishIn': 1}">
        <span>
            {{largeImg}}
        </span>
   </div>
</div>

using ng-class I want to apply css class to current element which will invoke certain animation on that element like here

css class is correctly applied when I look using firebug but animation is not invoked. When I replace this code with hardcoded values everything works

<div style="width:200px; height:200px;background-image:url('img/200x200/1.png');"
          ng-class="{'magictime foolishIn': 1}">
            <span>1</span>
       </div>

from angularjs I'm using $scope.largeImg as property for binding on the view.

img/200x200/{{largeImg%8}}.png What is the %8?

Hardik Gondalia
– Hardik Gondalia

2015-09-14 10:09:33 +00:00
Commented Sep 14, 2015 at 10:09 — Hardik Gondalia
– Hardik Gondalia, Commented Sep 14, 2015 at 10:09
it's typo leftover. fixed now.

user1765862
– user1765862

2015-09-15 06:11:30 +00:00
Commented Sep 15, 2015 at 6:11 — user1765862
– user1765862, Commented Sep 15, 2015 at 6:11

Pasan Ratnayake · Accepted Answer · 2015-09-15 09:35:44Z

1

.myInnerDiv {
   width: 200px;
   height: 200px;
   height:200px;background-image:url('img/200x200/{{largeImg % 8}}.png');
}

First your content in 'style' property can be a CSS class like above. Also, if you want to trigger animation by adding a CSS class, you can just add it 'class' property like below.

<div class="myDiv">
<div class="myInnerDiv magictime foolishIn">
    <span>
        {{largeImg}}
    </span>

However, if you want to add it based on a flag, which gets updated by clicking a button, you can use 'ng-class' directive. Look at this JsFiddle.

Update: Based on OP's comments. The answer is updated in the JSFiddle

To achieve your functionality, you need to watch out for changes to your target value. I recommend writing a directive for this, since it is what the directives are for - to manipulate UI.

edited Sep 15, 2015 at 9:35

answered Sep 14, 2015 at 11:48

Pasan Ratnayake

4954 silver badges10 bronze badges

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

5 Comments

user1765862 Over a year ago

thank you for your time but this doesnt work in my code. Whenever $scope.largeImg value is changed css animation doesnt work.

Pasan Ratnayake Over a year ago

Ahh! So your question is actually incorrect. Your question should be 'How to trigger an animation whenever I change $scope.largeImg value?'

Pasan Ratnayake Over a year ago

I updated the answer - check out the last example of the JSFiddle

user1765862 Over a year ago

Great PasanRatnayake, just one more question, I need to use dynamic image instead of this 3 hardcoded from your directive example.

Pasan Ratnayake Over a year ago

Whichever helps you to achieve the functionality you want in your application. Of course, you can move the code in the directive to your controller, then you'd have to duplicate code to make it work. Directives make great re-usable components, if done right. Also, if you think this is the answer, mark is as the answer, so then thread can close and it will help someone who's looking for the answer too

Kalhan · Accepted Answer · 2015-09-14 10:29:34Z

0

i think you can use ng-style

<div style="width:200px; height:200px;" 
     ng-style="{'background-image': 'url(img/200x200/{{ largeImg }}.png)'}"
     ng-class="{'magictime foolishIn': 1}">

edited Sep 14, 2015 at 10:29

answered Sep 14, 2015 at 10:11

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

1 Comment

user1765862 Over a year ago

thank you for your time but this doesnt work in my code. Whenever $scope.largeImg value is changed css animation doesnt work.

Collectives™ on Stack Overflow

using ng-class with angular $scope property

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related