how to add class on button click in angular?

Question

I make a simple directive .I have two button on that directive .I am able to get click event of that button .But I want to add class on that .

I have one class

.red {
  background-color: red;
}

I want to add this class whenever button is click ..

Intially login button have red class .When logout button is click it apply on logout button and remove from login button

or again if I click on login button it apply on login button and remove from logout button ..

I do like that

angular.module('app', ['ui.router']).directive('tm', function() {
  return {
    restrict: 'E',
    templateUrl: 'login.html',
    scope: {
      login: "&",
      logout: '&'
    },
    controller: 'f',
    controllerAs: 'vm'
  };
})

here is code http://plnkr.co/edit/Q1e8u0okOa4looLcb2YO?p=preview

use ngClass. docs.angularjs.org/api/ng/directive/ngClass

Claies
– Claies

2015-12-22 02:28:48 +00:00
Commented Dec 22, 2015 at 2:28 — Claies
– Claies, Commented Dec 22, 2015 at 2:28
I am trying to do with ngClass ..I

user944513
– user944513

2015-12-22 02:31:17 +00:00
Commented Dec 22, 2015 at 2:31 — user944513
– user944513, Commented Dec 22, 2015 at 2:31

Anik Islam Abhi · Accepted Answer · 2015-12-22 02:37:06Z

2

Add a link function

Try like this

link: function(scope, elm, attr) {
  elm.find("button").on("click", function(e) {
    elm.find("button").removeClass("red");
    angular.element(this).addClass("red");
  })
}

PLNKR

Or you can do it using ngClass

Like this

JS

vm.isLogin = true;
vm.login = function() {
  vm.isLogin = true;
}

vm.logout = function() {
  vm.isLogin = false;
}

HTML

<button type="button" class="btn btn-default"  ng-class="{'red': vm.isLogin }"  ng-click='vm.login()'>Login</button>
<button type="button" class="btn btn-default" ng-class="{'red': !vm.isLogin }" ng-click='vm.logout()'>logount</button>

PLNKR

edited Dec 22, 2015 at 2:37

answered Dec 22, 2015 at 2:32

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

11 Comments

user944513 Over a year ago

got it your answer is correct..but I am looking for using ng-class .Mean I want to write my logic o controller .I want to take one variable ..and that variable become true and false

user944513 Over a year ago

your logic is fail when there 3 button ..and I want to do this only for first two button..it apply on all button

Anik Islam Abhi Over a year ago

nope it'll work for all button though i have added your ngClass part @user944513

user944513 Over a year ago

thanks i have one Question ..you are correct ...how vm is define in controller.we are not passsing to directive how vm.isLogin works.. see my plunker..plnkr.co/edit/Xw9ensF5zdnZv0rlE6I7?p=preview

user944513 Over a year ago

I changed controllerAs: 'vmm', and ng-click='vmm.login()' ..but vm.login still work..why ? how directive knows it is true or false ..it is written in controller

|

Collectives™ on Stack Overflow

how to add class on button click in angular?

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related