How to change icon when tap on the list


#1

Hello,

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.


#2

Learn about ng-class diective.


#3
<div class="list">
	<div class="item" on-tap="playMedia('001.mp3');">
		001.mp3
		<span class="item-note ion-play" ng-class="{ion-play: (isPlayingMedia('001.mp3')), ion-pause: !(isPlayingMedia('001.mp3'))}"></span>
    </div>
</div>

You should keep track of which song is playing and make a function in your scope “isPlayingMedia” that returns a boolean indicating wether the given media is playing.