Defaulting a button state in a button bar

ionic-v1
1

I’m using an inline button bar to offer two different views of data: a list of names sorted alphabetically and a “party” view where data is grouped by the primary registrant (the gray buttons here):

I’d like to tie these to a model variable and default one of them to its “on” state. How do I do that?

It’s kind of like radio buttons, but I don’t want them in list form.

1 Like
2

Hi @AdamTuttle,

It depends on how you’re creating the button bar. Could you show us some markup from it?

3 
<li class="item item-positive item-text-wrap">
	<div class="button-bar button-bar-inline">
		<a class="button" ng-click="setPartyMode(false)"><i class="icon ion-android-sort"></i></a>
		<a class="button" ng-click="setPartyMode(true)"><i class="icon ion-ios7-people"></i></a>
	</div>
	{{selectedEventName}}
</li>
4

You can use ng-class from angular. http://docs.angularjs.org/api/ng.directive:ngClass

<li class="item item-positive item-text-wrap">
  <div class="button-bar button-bar-inline">
    <a class="button" ng-click="setPartyMode(false)" ng-class="{'active': isPartyMode}"><i class="icon ion-android-sort"></i></a>
    <a class="button" ng-click="setPartyMode(true)" ng-class="{'active': !isPartyMode}"><i class="icon ion-ios7-people"></i></a>
  </div>
  {{selectedEventName}}
</li>
2 Likes
5

Cool thanks, that makes sense. If the active class is documented, I couldn’t find it. :smile: