adding and removing classes in angularJs using ng-click

Question

I am trying to work how to add a class with ngClick  I have uploaded up my code onto plunker Click here  Looking at the angular documentation i can t figure out the exact way it should be done  Below is a snippet of my code  Can someone guide me in the right direction    lt div ng-show  isVisible  ng-class    selected    index  selectedIndex   class  block  gt  lt  div gt    Controller  var app   angular module  MyApp        app controller  subNavController   function   scope             scope toggle   function                  scope isVisible      scope isVisible                       scope isVisible   false

User · Answer

If you prefer separation of concerns such that logic for adding and removing classes happens on the controller, you can do this

controller

 (function() {
    angular.module('MyApp', []).controller('MyController', MyController);

    function MyController() {
      var vm = this;
      vm.tab = 0;

      vm.setTab = function(val) {
          vm.tab = val;
       };
      vm.toggleClass = function(val) {
          return val === vm.tab;
           };
        }
    })();

HTML

<div ng-app="MyApp">
  <ul class="" ng-controller="MyController as myCtrl">
    <li ng-click="myCtrl.setTab(0)" ng-class="{'highlighted':myCtrl.toggleClass(0)}">One</li>
    <li ng-click="myCtrl.setTab(1)" ng-class="{'highlighted':myCtrl.toggleClass(1)}">Two</li>
    <li ng-click="myCtrl.setTab(2)" ng-class="{'highlighted':myCtrl.toggleClass(2)}">Three</li>
   <li ng-click="myCtrl.setTab(3)" ng-class="{'highlighted':myCtrl.toggleClass(3)}">Four</li>
 </ul>

CSS

.highlighted {
   background-color: green;
   color: white;
}

User · Answer

I can t believe how complex everyone is making this  This is actually very simple  Just paste this into your html  no directive  controller changes required -  bg-info  is a bootstrap class     lt div class  form-group col-md-12  gt       lt div ng-class    bg-info         transport type       ng-click  transport type false  gt CARS lt  div gt       lt div ng-class    bg-info   transport type   TRAINS    ng-click  transport type  TRAINS   gt TRAINS lt  div gt       lt div ng-class    bg-info   transport type   PLANES    ng-click  transport type  PLANES   gt PLANES lt  div gt   lt  div gt

User · Answer

for Reactive forms -  HTML file   x000D   x000D   lt div class  col-sm-2  gt  x000D     lt button type  button    class    btn class   id  b1   click   changeMe    gt    btn label    lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    TS file    x000D   x000D  changeMe     x000D    switch  this btn label    x000D      case  Yes    this btn label    Custom    x000D      this btn class    btn btn-danger btn-lg btn-block   x000D      break  x000D      case  Custom   this btn label     No     x000D      this btn class    btn btn-success btn-lg btn-block   x000D      break  x000D      case   No    this btn label    Yes    x000D        this btn class    btn btn-primary btn-lg btn-block   x000D        break  x000D      x000D   x000D   x000D

User · Answer

You have it exactly right  all you have to do is set selectedIndex in your ng-click   ng-click  selectedIndex   1    Here is how I implemented a set of buttons that change the ng-view  and highlights the button of the currently selected view    lt div id  sidebar  ng-init  partial    main   gt       lt div class  routeBtn  ng-class   selected partial   main    ng-click  router  main    gt  lt span gt Main lt  span gt  lt  div gt       lt div class  routeBtn  ng-class   selected partial   view1    ng-click  router  view1    gt  lt span gt Resume lt  span gt  lt  div gt       lt div class  routeBtn  ng-class   selected partial   view2    ng-click  router  view2    gt  lt span gt Code lt  span gt  lt  div gt       lt div class  routeBtn  ng-class   selected partial   view3    ng-click  router  view3    gt  lt span gt Game lt  span gt  lt  div gt     lt  div gt    and this in my controller    scope router   function endpoint         location path         scope partial   endpoint

User · Answer

You just need to bind a variable into the directive  ng-class  and change it from the controller  Here is an example of how to do this    x000D   x000D  var app   angular module  ap       x000D   x000D  app controller  con  function  scope   x000D     scope class    red   x000D     scope changeClass   function    x000D      if   scope class      red   x000D         scope class    blue   x000D      else x000D         scope class    red   x000D       x000D      x000D   red  x000D    color red  x000D    x000D   x000D   blue  x000D    color blue  x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt body ng-app  ap  ng-controller  con  gt  x000D     lt div ng-class  class  gt   class   lt  div gt  x000D     lt button ng-click  changeClass    gt Change Class lt  button gt      x000D   lt  body gt  x000D   x000D   x000D    Here is the example working on jsFiddle

User · Answer

I used Zack Argyle s suggestion above to get this  which I find very elegant   CSS    active       background-position  0 -46px  important      HTML    lt button ng-click  satisfaction    VeryHappy   ng-class   active satisfaction     VeryHappy    gt       lt img src  images VeryHappy png  style  height 24px     gt   lt  button gt   lt button ng-click  satisfaction    Happy   ng-class   active satisfaction     Happy    gt       lt img src  images Happy png  style  height 24px     gt   lt  button gt   lt button ng-click  satisfaction    Indifferent   ng-class   active satisfaction     Indifferent    gt       lt img src  images Indifferent png  style  height 24px     gt   lt  button gt   lt button ng-click  satisfaction    Unhappy   ng-class   active satisfaction     Unhappy    gt       lt img src  images Unhappy png  style  height 24px     gt   lt  button gt   lt button ng-click  satisfaction    VeryUnhappy   ng-class   active satisfaction     VeryUnhappy    gt       lt img src  images VeryUnhappy png  style  height 24px     gt   lt  button gt

User · Answer

you can also do that in a directive  if you want to remove the previous class and add a new class       directive  toggleClass   function         return           restrict   A           link  function scope  element  attrs                element bind  click   function                     if element attr  class       glyphicon glyphicon-pencil                         element removeClass  glyphicon glyphicon-pencil                        element addClass attrs toggleClass                     else                       element removeClass  glyphicon glyphicon-ok                        element addClass  glyphicon glyphicon-pencil                                                             and in your template    lt i class  glyphicon glyphicon-pencil  toggle-class  glyphicon glyphicon-ok  gt  lt  i gt

User · Answer

I want to add or remove  active  class in my code dynamically on ng-click  here what I have done    lt ul ng-init  selectedTab    users   gt      lt li ng-class    active  selectedTab      users    ng-click  selectedTab    users   gt  lt a href   users   gt Users lt  a gt  lt  li gt      lt li ng-class    active  selectedTab      items    ng-click  selectedTab    items   gt  lt a href   items   gt Items lt  a gt  lt  li gt   lt  ul gt

User · Answer

x000D   x000D  var app   angular module  MyApp        x000D  app controller  subNavController   function   scope   x000D   x000D           scope toggle   function     x000D               scope isVisible      scope isVisible  x000D             x000D   x000D           scope isVisible   false  x000D          x000D   lt div ng-show  isVisible  ng-class    active  isVisible   class  block  gt  lt  div gt  x000D   x000D   x000D

User · Answer

There is a simple and clean way of doing this with only directives    lt div ng-class    class-name   clicked   ng-click  clicked    clicked  gt  lt  div gt

[javascript] adding and removing classes in angularJs using ng-click

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-ng-click

Examples related to ng-class