Angular Change image src depending on class

Question

If image has 'loaded' class, i need to change image src to "{{item.preview2}}"

<div ng-repeat="item in items">
<img src="{{item.preview}}" class="grid-img" />
</div>

Ok, so what is stopping you in doing that?

scana
– scana

2016-02-10 16:19:44 +00:00
Commented Feb 10, 2016 at 16:19 — scana
– scana, Commented Feb 10, 2016 at 16:19

Stepan Suvorov · Accepted Answer · 2016-02-10 15:56:46Z

1

directive('loaded', function(){
    return {
        restrict: 'C',
        link: function(scope){
             scope.item.preview = scope.item.preview2
        }

    }

})

and in html

<img ng-src="{{item.preview}}" class="grid-img" />

answered Feb 10, 2016 at 15:56

Stepan Suvorov

26.3k27 gold badges117 silver badges179 bronze badges

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

2 Comments

trigger Over a year ago

i want to handle when image will get class="loaded"

Stepan Suvorov Over a year ago

than you need to add watcher, but it's not really angular way. You should not watch for class you should react on data changed. I think something is wrong with your task

Amonn · Accepted Answer · 2016-02-10 15:59:26Z

1

In the case you describe I would just use ng-if to control what elements are rendered to the DOM. for example:

<img ng-if="item.loaded" src={{item.preview2}} class="grid-img-loaded"/>
<img ng-if="!item.loaded" src={{item.preview}} class="grid-img"/>

Hope this helps.

answered Feb 10, 2016 at 15:59

Amonn

846 bronze badges

2 Comments

trigger Over a year ago

I need handle case, when image in ng-repeat will have class="loaded"

Amonn Over a year ago

I am suggesting you use a property that is set when the item is loaded (item.loaded). From there you can control what goes in the DOM using standard angular directives.

Collectives™ on Stack Overflow

Angular Change image src depending on class

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related