Best way to change images ontap

ionic-v1
1

Hi everyone!

I’ve been looking for a good way to switch between a standard image to an activated one (when I click it)
I googled it, looking for a way to do it using angular but I don’t know if ionic has something to help me with this.

links that I found useful but maybe not good solutions :


2

Ionic docs are your best friend. Look there before posting a question :smile:. Take a look at this.

So in your view you could have something like:

<img ng-src="{{ imageUrl }} on-tap="onTap()" />

Then in your controller:

$scope.imageUrl = 'http://placekitten.com/g/200/400';

$scope.onTap = function() {
	
	$scope.imageUrl = 'http://placekitten.com/g/200/300';

};
2 Likes
3

Thanks @seanhill

I’ve done something similar to this (but I didn’t use onTap method, so thank you :smile:)

But I rewrote the code using the “activated” class

Code:

  a{
    &.divulga {
      background-image: url("../img/task/divulga-causa.png");
      &.activated{
        background-image: url("../img/task/divulga-causa-activated.png");
      }
    }

So every time I click on the ‘a’ element the activated class is called and the images are updated

I don’t know which one is the best solution, but I chose the second approach because It seemed to be more “clean”.

Again thanks for the help =)

4

No problem :slight_smile: Yeah either solution would work, just depends on your needs!