AngularUI Glyphicon Button Toggle

[Andrew Novak]

I'm building an html5 audio player I want the play button to be one button that when clicked turns into a pause button instead of there being two buttons. And I can't figure out how to toggle between the play and pause button with the glyphicons using a angularUI button.

The Website: http://test.shibagames.com

[Rene Zelaya]

Hi Andrew,

It sounds like what you might want to wrap that pause/play glyphicon in a div with ng-if.  ng-if has a pretty simple syntax.  It could be something like:
<div ng-if="playing">PauseSymbol</div>
<div ng-if="paused">PlaySymbol</div>

And just define "playing" and "paused" in your JavaScript.

Best,
Rene

[Andrew Novak]

I'm still new to angularjs. Would you be able to demonstrate the javascript side. I started this, but I just don't know how to make the connection with ng-if. I'm looking at the documentation here http://docs.angularjs.org/api/ng.directive:ngIf , but it doesn't have a javascript tab in the example so I'm just not sure.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/cFEnRBY6LcY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Kamal]

Andrew,

I am working on a directive for a similar need, please find the plnkr for the same. Its a mix of css & angular directive it work using an checkbox with a label which shows different styles on checked status http://plnkr.co/edit/fiV4lPJb4zzYiySivLJR?p=preview