How to change ion icon at runtime

ionic-v1
1

Hi, I am developing android app where I need to change button at my html page at run time.

   <ion-view> <ion-nav-buttons side="right">
          <button class="button button-icon icon ion-play" ng-click="vm.upload" ></button>
        </ion-nav-buttons></ion-view>

in the above example, when user click on button i should change “icon ion-play” to “icon ion-pause”.

Kindly let me know.

Thanks.

2

You would be better off having two buttons and hiding them conditionally. For example…

<ion-view> 
	<ion-nav-buttons side="right">
		<button class="button button-icon icon ion-play" ng-click="vm.upload" ng-if="isPlayMode()" ></button>
		<button class="button button-icon icon ion-pause" ng-click="doStuff ng-if="!isPlayMode()"></button>
	</ion-nav-buttons>
</ion-view>

in your controller…

$scope.isPlayMode = function(){
	return $scope.playMode
}

And then for the click handlers of the two buttons, change the value of $scope.playMode to true or false.

3

@andrewmcgivery, I am doing the same. But I am seeing both buttons for a fraction of second while toggling.

So just thought of finding any way replacing icon at run time.

Thanks any way.

4

Ah, yes. I’ve had that issue. Try using ng-show instead of ng-if.

5

Yep. That fixed. too many options…still ng-show/ng-hide…are good options…

Thanks man.

7

Please show your code , I have getting problem with ng-show