Adding a class from a controller in AngularJS

Question

Im building a simple menu in Angular:

<ion-nav-view name="section"></ion-nav-view>
<div class="tabs-striped tabs-color-assertive tabs-icon-top">
    <div class="tabs">
        <a class="tab-item" ng-click="menuClick(1)">
            <i class="icon ion-home"></i>
            Test
        </a>
        <a class="tab-item" ng-click="menuClick(2)">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item" ng-click="menuClick(3)">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
    </div>
</div>

The controller that handles this view is:

app.controller('menu', function ($scope, $state) {
    $scope.menuClick = function(btn) {
        if(btn == 1) {
            $state.go('app.lists');
        }
        else if(btn == 2)
            $state.go('app.pay');

    }
});

How can I add a class to the button just pressed?

Andurit · Accepted Answer · 2016-09-05 14:27:54Z

I would say the most easy way for this is to make additional variabile like $scope.pressedon $scope and use ng-class in template

And the code should looks like:

$scope.menuClick = function(btn) {
   $scope.pressed = btn;
   if(btn == 1) {
       $state.go('app.lists');
   }
   else if(btn == 2)
       $state.go('app.pay');
}

and HTML will looks like:

<div class="tabs-striped tabs-color-assertive tabs-icon-top">
    <div class="tabs">
        <a class="tab-item" ng-click="menuClick(1)" ng-class="pressed === 1 ? 'your new class' : ''">
            <i class="icon ion-home"></i>
            Test
        </a>
        <a class="tab-item" ng-click="menuClick(2)" ng-class="pressed === 2 ? 'your new class' : ''">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item" ng-click="menuClick(3)" ng-class="pressed === 3 ? 'your new class' : ''">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
    </div>
</div>

korun · Accepted Answer · 2016-09-05 15:06:28Z

0

A bit more of a jQuery-ish type of solution but better if you don't need to clutter the $scope variable just for addition (or toggling) of css classes.

When calling a function in ng-click there is an implicit $event variable passed to the function called (angular docs reference) which is MouseEvent object.

You can access the element using the target property MouseEvent.target and then execute jQuery function for managing the classes on the DOM element.

ex:

<div ng-click="clickHandler($event);"></div>

$scope.clickHandler = function($event) {
  var element = $($event.target);

  element.toggleClass('clicked');
}

answered Sep 5, 2016 at 15:06

korun

2,3211 gold badge16 silver badges14 bronze badges

2 Comments

Kindzoku Over a year ago

The question was about tabs, your example toggles the class on a single item.

korun Over a year ago

This answer is a general one, regarding the last sentence question - "How can I add a class to the button just pressed?"

Kindzoku · Accepted Answer · 2016-09-05 15:16:12Z

I've read a bit about ion-nav, and it seems it's utilizing ui-router library. So you can try to use:

<div class="tabs-striped tabs-color-assertive tabs-icon-top">
    <div class="tabs">
        <a class="tab-item" ui-sref="path.to.state1" ui-sref-active="class name if in state">
            <i class="icon ion-home"></i>
            Test
        </a>
        <a class="tab-item" ui-sref="path.to.state2" ui-sref-active="class name if in state">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item" ui-sref="path.to.state3" ui-sref-active="class name if in state">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
    </div>
</div>

ui-sref - generates link for state

ui-sref-active - a class that would be added if you are in this state.

The only right solution is to attach your buttons to a state.

As alternative you can do something like:

$scope.$state = $state; <-- in your controller. You should share $state object to your view.

<div class="tabs">
    <a class="tab-item" ng-class="{'active': $state.is('state.path.state1')}" ng-click="menuClick(1)">
        <i class="icon ion-home"></i>
        Test
    </a>
    <a class="tab-item" ng-class="{'active': $state.is('state.path.state2')}" ng-click="menuClick(2)">
        <i class="icon ion-star"></i>
        Favorites
    </a>
    <a class="tab-item" ng-class="{'active': $state.is('state.path.state3')}" ng-click="menuClick(3)">
        <i class="icon ion-gear-a"></i>
        Settings
    </a>
</div>

Collectives™ on Stack Overflow

Adding a class from a controller in AngularJS

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related