AngularJS toggle class using ng-class

Question

I am trying to toggle the class of an element using ng-class   lt button class  btn  gt     lt i ng-class    isAutoScroll       icon-autoscroll     icon-autoscroll-disabled    gt  lt  i gt   lt  button gt    isAutoScroll      scope isAutoScroll   function          scope autoScroll     scope autoScroll    false   true      return  scope autoScroll      Basically  if  scope autoScroll is true  I want ng-class to be icon-autoscroll and if its false  I want it to be icon-autoscroll-disabled  What I have now isn t working and is producing this error in the console  Error  Lexer Error  Unexpected next character  at columns 18-18     in expression    isAutoScroll       icon-autoscroll     icon-autoscroll-disabled      How do I correctly do this   EDIT  solution 1   outdated    lt button class  btn  ng-click  autoScroll    autoScroll  gt     lt i ng-class    icon-autoscroll   autoScroll   icon-autoscroll-disabled    autoScroll   gt  lt  i gt   lt  button gt    EDIT 2  solution 2   I wanted to update the solution as Solution 3  provided by Stewie  should be the one used  It is the most standard when it comes to ternary operator  and to me easiest to read   The solution would be   lt button class  btn  ng-click  autoScroll    autoScroll  gt     lt i ng-class  autoScroll    icon-autoscroll     icon-autoscroll-disabled   gt  lt  i gt   lt  button gt    translates to   if  autoScroll    true      use class  icon-autoscroll      else use  icon-autoscroll-disabled

User · Answer

As alternate solution  based on javascript logic operator   amp  amp   which returns the last evaluation  you can also do this like so    lt i ng-class  autoScroll  amp  amp   icon-autoscroll      autoScroll  amp  amp   icon-autoscroll-disabled   gt  lt  i gt    It s only slightly shorter syntax  but for me easier to read

User · Answer

autoscroll will be defined and modified in the controller   lt span ng-class   quot autoscroll  class if true   class if false  quot  gt  lt  span gt   Add multiple classes based on condition by   lt span ng-class   quot autoscroll  first second third   classes if false  quot  gt  lt  span gt

User · Answer

How to use conditional in ng-class    Solution 1    lt i ng-class    icon-autoscroll   autoScroll   icon-autoscroll-disabled    autoScroll   gt  lt  i gt    Solution 2    lt i ng-class   true   icon-autoscroll   false   icon-autoscroll-disabled   autoScroll   gt  lt  i gt    Solution 3  angular v 1 1 4  introduced support for ternary operator     lt i ng-class  autoScroll    icon-autoscroll     icon-autoscroll-disabled   gt  lt  i gt    Plunker

User · Answer

lt div data-ng-init  featureClass false        data-ng-click  featureClass  featureClass        data-ng-class    active   featureClass   gt      Click me to toggle my class   lt  div gt    Analogous to jQuery s toggleClass method  this is a way to toggle the active class on off when the element is clicked

User · Answer

I made this work in this way   lt button class  quot btn quot  ng-click  toggleClass  event   gt button one lt  button gt   lt button class  quot btn quot  ng-click  toggleClass  event   gt button two lt  button gt   in your controller   scope toggleClass   function  event          event target  toggleClass  active

User · Answer

Add more than one class based on the condition    lt div ng-click  AbrirPopUp s    ng-class    class1 class2 class3   isNew               class1 class4   isNew   gt    isNew    lt  div gt    Apply  class1   class2   class3 when isNew false   Apply  class1  class4 when isNew true

[javascript] AngularJS toggle class using ng-class

Examples related to javascript

Examples related to angularjs