How to change icon when tap on the list

Question

How to change icon when tap on the list

I would like to ask you about how to change the icon when I tap on the list

now I have HTML code like this

<div class="list">
    <div class="item" on-tap="playMedia('001.mp3')">
        001.mp3
        <span class="item-note ion-play"></span>
    </div>
</div>

when user tap the list item, the app will play mp3 file. moreover I would like to change an icon at

<span class="item-note ion-play"></span>

to another icon. What can I write down the code. Any idea?

Thank you.

angularjs
ionic-framework

Answer 1

Assuming item-note is that class that you want to switch:

<div class="list">
    <div class="item" on-tap="playMedia('001.mp3')" ng-click="playing = !playing">
        001.mp3
        <span class="ion-play {{playing ? 'other-icon-class' : 'item-note'}}"></span>
    </div>
</div>