Button-bar and active button


#1

How can I make a button active state?
I tried this:

ng-class="{'active': pages, 'unactive': !pages}" ng-click="selectViewInMap('pages'); pages=!pages"

I tried jquery but after two seconds the active deleted from class


#2

Try to avoid jQuery at all costs when using AngularJS and Ionic.

Here’s a working sample: http://codepen.io/calendee/pen/jArnK

<ion-content padding="true">
	<div class="button-bar">
	  <a class="button" ng-class="{'active' : data.activeButton === 1}">First</a>
	  <a class="button" ng-class="{'active' : data.activeButton === 2}">Second</a>
	  <a class="button" ng-class="{'active' : data.activeButton === 3}">Third</a>
	</div>      
</ion-content>
.controller('MyCtrl', function($scope, $interval) {
  $scope.myTitle = 'Template';
  
  $scope.doSomething = function() {
    $scope.myTitle = $scope.myTitle + ' something';
  };
  $scope.data = {
    activeButton : 1
  }
  
  $interval( function() {
    $scope.data.activeButton = $scope.data.activeButton + 1;
    if($scope.data.activeButton > 3) $scope.data.activeButton = 1;
  }, 2000);

});

#3

Thanks so much work!!
Although not active so I opened a new class