Button bar button's active state are disappearing

StackOverflow https://stackoverflow.com/questions/22832763

Pergunta

Button bar button's active state are disappearing. When we click on it "active" class is assigned and removed immediately. It should stay active.

html page

<html ng-app="myApp">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title>Filter with Button Bar</title>
    <script data-require="angular.js@*" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
    <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet" />
    <script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
     <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <div class="bar bar-header bar-light">
      <h1 class="title">Filter with Buttons</h1>
    </div>
    <div class="bar bar-subheader">
      <div class="button-bar">
        <a class="button {{(type == 'Cats') &&  'active' || ''}}" ng-click="setType($event)">Cats</a>
        <a class="button {{(type == 'Dogs') &&  'active' || ''}}" ng-click="setType($event)">Dogs</a>
        <a class="button {{(type == 'Birds') &&  'active' || ''}}" ng-click="setType($event)">Birds</a>
      </div>
    </div>

  </body>

</html>

script.js

angular.module('myApp',['ionic'])
.controller('myCtrl',['$scope',function($scope){
  $scope.type = 'Cats';
  $scope.setType = function(event){
    $scope.type = angular.element(event.target).text();
    console.log($scope.type);
  };
}]);

Plunkr link (http://plnkr.co/edit/zjSMARZzGxQqxndR1Ew3?p=preview)

Foi útil?

Solução

It is fixed in latest nightly build of ionic framework. Issue link. Plunkr link

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top