how to add active class in ionic + angular?

Question

could you please tell me how to add active class in selected button .when use select any button from toolbar it become green and show data .Actually I have four button and four div contend .I need to show div contend when I select the button .In other words when I click "A button" it show "A contend ".When I click "B button " it show "b contend " now b button is active rest are inactive .can we do this angular .I tried to do using ng-if but succeed till now here is my code

<html ng-app="ionicApp">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
      <title>Tabs Example</title>
      <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
      <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
   </head>
   <body>
   </body>
   <ion-view ng-controller="showhidecntr">
      <ion-header-bar align-title="center" class="bar-balanced">
         <div class="buttons">
            <a class="button icon-left ion-chevron-left button-clear">Back</a>
            <!--i style="font-size:30px;" class='icon ion-chevron-left'></i-->
         </div>
         <h1 class="title">Title</h1>
      </ion-header-bar>
      <ion-content>
         <div class="button-bar">
            <a class="button button-small"  ng-click="AbuttonClick">a </a>
            <a class="button button-small"  ng-click="BbuttonClick">b </a>
            <a class="button button-small"  ng-click="CbuttonClick">c</a>
            <a class="button button-small"  ng-click="DbuttonClick">d</a>
         </div>
         <div class="a_content" ng-if='isShowAcontend'>
            a contend
         </div>
         <div class="b_content" ng-if='isShowBcontend'>
            b contend
         </div>
         <div class="c_content" ng-if='isShowCcontend'>
            c contend
         </div>
         <div class="d_content" ng-if='isShowDcontend'>
            d contend
         </div>
      </ion-content>
   </ion-view>
</html>

http://codepen.io/anon/pen/JdErVM

Kevin F · Accepted Answer · 2015-05-30 06:07:05Z

4

Updated codepen with working example, tweak styles as necessary http://codepen.io/anon/pen/PqWJrv

This can be done entirely in the html, no controller code necessary (unless you want a default tab, then add $scope.activeButton = 'a'; in controller). You need to can keep track of a $scope variable and use ng-class

<a ng-click="activeButton = 'a'" ng-class="{ 'active': activeButton === 'a' }>A</a>
<a ng-click="activeButton = 'b'" ng-class="{ 'active': activeButton === 'b' }>B</a>

set that up with each button and ng-class will take care of the rest. The good thing with directives is you can get a lot done just in your html without ever writing code in the controller.

You can do the same with your content areas with the same variable to keep it simple:

<div ng-show="activeButton === 'a'">Content A</div>
<div ng-show="activeButton === 'b'">Content B</div>

edited May 30, 2015 at 6:07

answered May 30, 2015 at 5:56

Kevin F

2,8852 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

errata · Accepted Answer · 2015-05-30 06:04:43Z

0

One issue is that with ng-click I believe you need to have parens to execute the a controller function. eg:

  <a class="button button-small" ng-click="aButtonClick()"> a </a>

Regarding the use of ng-if vs ng-show:

"The ngIf directive removes or recreates a portion of the DOM tree based on an expression."

"The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute."

  <div class="a_content" ng-if='isShowAcontend'>
     a contend
  </div>

then in your controller:

$scope.aButtonClick = function(){
  $scope.isShowAcontend = true;
  // you may have to do this as well but I'm sure there is a cleaner way to do it:
  $scope.isShowBcontend = false;
  $scope.isShowCcontend = false;    
}

a better approach would be something like:

<a class="button button-small" ng-click="handleButtonClick('a')"> a </a> 
<a class="button button-small" ng-click="handleButtonClick('b')"> b </a>

in your controller:

$scope.handleClick = function(section){
    $scope.active_content_area = section;
}

and

<div class="a_content" ng-show='active_content_area == "a"'> a contend </div>

<div class="a_content" ng-show='active_content_area == "b"'> b contend </div>

...

This way you won't have to manage setting the separate variables to false to hide your other divs.

answered May 30, 2015 at 6:04

errata

27.4k2 gold badges25 silver badges33 bronze badges

3 Comments

user944513 Over a year ago

thank could you pleas give code pen..I think you have better approch

user944513 Over a year ago

how to add active class

errata Over a year ago

you can either add an "active" class as in the answer below or use angular's method ng-show

Collectives™ on Stack Overflow

how to add active class in ionic + angular?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related