CODEWITHSUNDEEP
angularjsionic-framework
DomingoSL
DomingoSL

Reputation: 15504

Adding a class from a controller in AngularJS

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?

Upvotes: 0

Views: 666

Answers (3)

Kindzoku
Kindzoku

Reputation: 1420

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>

Upvotes: 0

korun
korun

Reputation: 2301

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');
}

Upvotes: 0

Andurit
Andurit

Reputation: 5762

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>

Upvotes: 1

Related Questions