Add Class, Remove Class or Toggle Class to div using AngularJS

Thursday, 21 August 2014 | Posted by
AngularJS supports addClass, removeClass jQuery functionality. Here in below examples we can see how to add a class to an element.
AngularJS is providing ng-class to manipulate classes of elements
Angular2 : If you are looking for Angular2 solution, please click here

Steps to add class using ng-class : 

  1. Initiate $scope.myClass to array
  2. Push classes into above array
$scope.myClass = [];
$scope.myClass.push('red');

Steps to remove class using ng-class : 

  1. Initiate $scope.myClass to array
  2. Pop classes from above array
$scope.myClass = [];
$scope.myClass.pop('red');

Steps to check class using ng-class : 

  1. Initiate $scope.myClass to array
  2. Check index of the class that you want to check
$scope.myClass = ['red'];
if($scope.myClass.indexOf('red') == -1) {
    alert('false');
} else {
    alert('true');
}

Steps to add class using ng-class with JSON

  1. Initiate $scope.myClass to JSON object of classes and boolean values
  2. Assign true for the JSON class name, that you want to add
$scope.myClass = {red:false};
$scope.addClass = function() {
   $scope.myClass.red = true;
}
Try It Your Self

Steps to remove class using ng-class with JSON

  1. Initiate $scope.myClass to JSON object of classes and boolean values
  2. Assign false for the JSON class name, that you want to remove
$scope.myClass = {red:false};
$scope.removeClass = function() {
    $scope.myClass.red = false;
}
Try It Your Self

Steps to toggle class using ng-class with JSON

  1. Initiate $scope.myClass to JSON object of classes and boolean values
  2. Assign opposite boolean value to the JSON class name
$scope.myClass = {red:false};
$scope.toggleClass = function() {
     $scope.myClass.red = !$scope.myClass.red;
};
Try It Your Self

Steps to add class to an elemnt :

  1. Get angular element of html element
  2. Use .addClass() method to add class to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.addClass('red');

Steps to remove class from an element :

  1. Get angular element
  2. Use .removeClass() method to remove class from that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.removeClass('red');
Try It Your Self

Steps to toggle class to an element :

  1. Get angular element
  2. Use .toggleClass() method to toggle class to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.toggleClass('red');

Find whether element has particular Class 

  1. Get angular element
  2. Use .hasClass() method to find whether element has class or not

var myEl = angular.element( document.querySelector( '#divID' ) );
if(myEl.hasClass('red')) {
  alert('has class red');
}
Labels:

42 comments:

  1. Admin30 January 2015 at 02:02

    thanks for this post I was looking since many days

    ReplyDelete
  2. rahul3 May 2015 at 22:50

    Thanks! It was quick help.

    ReplyDelete
  3. Unknown20 October 2015 at 11:25

    This was a nice short & to-the-point post. Thank you mucho!

    ReplyDelete
  4. Anonymous3 March 2016 at 22:27

    thanks .. Remove class code snippet really helped me.

    ReplyDelete
  5. Anonymous3 March 2016 at 22:34

    thanks .. Remove class code snippet really helped me.

    ReplyDelete
  6. Unknown25 April 2016 at 08:52

    Is great and thanks, but all these should be done in a directive

    ReplyDelete
  7. Sagar6 October 2016 at 06:17

    Suppose I have 3 spans in one div, and two of them has already added class 'red'. Then How can i remove those classes from those 2 spans in angular?

    ReplyDelete
    Replies
    1. Sample7 October 2016 at 21:29

      var jsEl = document.querySelectorAll('.red');

      for(var i=0; i< jsEl.length; i++) {
      var myEl = angular.element(jsEl[i]);
      myEl.removeClass('red');
      }

      Delete
  8. sriram14 May 2018 at 21:48

    Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.

    ionic training in chennai

    ReplyDelete
  9. Anonymous26 June 2018 at 06:04

    Thank you for sharing this Wonderful information.

    Ionic course | Ionic Training

    ReplyDelete
  10. Praylin S7 January 2019 at 01:51

    Nice blog! This is really worth reading. I'm glad that I found your post. Looking forward for more posts from you.


    Manual Testing Training in Chennai
    Manual Testing Training in Anna Nagar
    Oracle Training in Chennai

    ReplyDelete
  11. olive9 April 2019 at 02:53

    your article is very good and very helpful. every one can use and know that how Creating Custom Animations for Use in Tableau. if you want to gif covert to image than check it you can easily understand that how to Use GIF Converter to Get Images for Marketing

    ReplyDelete
  12. Aruna Ram13 August 2019 at 22:00

    Surpassing Article, This post contains great information about this topic. Can you please do a more extra post like from this blog and Thank you much more for sharing this useful info.

    Primavera Training in Chennai
    Primavera Coaching in Chennai
    Corporate Training in Chennai
    Pega Training in Chennai
    Embedded System Course Chennai
    Linux Training in Chennai
    Job Openings in Chennai
    Social Media Marketing Courses in Chennai
    Soft Skills Training in Chennai
    JMeter Training in Chennai
    Primavera Training in Anna Nagar

    ReplyDelete
  13. sasi14 August 2019 at 01:50

    I have to agree with everything in this post. Thanks for the useful sharing information.
    selenium Training in anna nagar
    selenium Training in Chennai
    selenium Training in OMR
    java training in T nagar
    Salesforce Training in T Nagar
    selenium Training in T Nagar
    Python Training in anna nagar
    IELTS Coaching in OMR

    ReplyDelete
  14. silakarim14 August 2019 at 04:00


    Thanks for sharing this post. It is very helpful for me to develop my skills in a right way.
    Ethical Hacking Course in Velachery
    Ethical Hacking Course in T Nagar
    Ethical Hacking Course in Tambaram
    Ethical Hacking Course in Anna Nagar
    Ethical Hacking Course in Porur
    Ethical Hacking Course in Vadapalani
    Ethical Hacking Course in Thiruvanmiyur
    Ethical Hacking Course in Adyar
    Ethical Hacking Course in OMR

    ReplyDelete
  15. Anbarasan143 September 2019 at 06:19

    Thanks for sharing a worthy information. This is really helpful. Keep doing more.
    Spoken English Classes in Chennai
    Spoken English Class in Chennai
    Spoken English in Chennai
    IELTS Training in Chennai
    IELTS Chennai
    Best English Speaking Classes in Mumbai
    Spoken English Classes in Mumbai
    IELTS Mumbai
    IELTS Coaching in Anna Nagar
    Spoken English Class in T Nagar

    ReplyDelete
  16. virgoacp14 September 2019 at 03:52

    Awesome post. I am a normal visitor of your blog and appreciate you taking the time to maintain the excellent site. I’ll be a frequent visitor for a long time.

    ACP Sheet
    ACP Sheet Price
    Aluminium Composite Panel

    ReplyDelete
  17. Karuna4 November 2019 at 23:57

    Nice blog thanks for sharing Tidy up your ambience by decorating them with amazing landscape plants in Chennai. Karuna Nursery Gardens is your portal to all the green that the world has to offer. Revolutionize your indoors, garden, terrace or office right now with us.
    rental plants in chennai

    ReplyDelete
  18. Digital_Zone21 November 2019 at 05:42

    Do you want to know more about web design agency Sempris or about what web design agencies can do for you? Then don't hesitate to contact us ! We are happy to assist you. An exploratory conversation or a free price estimate are certainly possible. Webdesign

    ReplyDelete
  19. arshiya8 January 2021 at 23:35

    Great information, nice to read your blog. Keep updating.
    positive effects of social media
    applications of artificial intelligence
    ai applications
    what is php used for in web design
    rpa uipath jobs
    salesforce interview questions for experienced

    ReplyDelete
  20. Huongkv24 January 2021 at 22:46

    Mua vé máy bay tại Aivivu, tham khảo

    vé máy bay đi Mỹ khứ hồi

    vé máy bay từ los về việt nam

    mua vé máy bay từ anh về việt nam

    bay từ pháp về việt nam mấy tiếng

    ReplyDelete
  21. IT services6 March 2021 at 09:34

    Fine data, considering the producer. This work is truly significant and fundamental.
    Thanks
    Regards
    Methu Robin
    Also, read a blog by Robin
    AI & ML Development Solutions

    ReplyDelete
  22. online dispensary that ships to all states13 June 2021 at 10:10

    buy weed online and save money to buy even more legit online dispensary ship all 50 states thanks you for this article buy weed online in addition, buy weed online legit

    ReplyDelete
  23. Unknown3 August 2021 at 22:54

    We are offering Passport fake ids and driving license that will help you in many situations USA, Europe Asia Canada, and Australia A counterfeit money Real Passports, Visas, Driver's License ,ID CARDS, Marriage certificates, Diplomas, Birth Certificates, Credit cards, Utility bills, Social Security cards . We have over 20 years of experience.High Quality Undetectable counterfeit Banknotes.

    WhatsApp +17202488130 ( highpills@gmail.com )
    WhatsApp +17202488130 ( highpills@gmail.com )

    ReplyDelete
  24. Tamil novels6 October 2021 at 08:48

    Very useful post.
    Tamil novel writers
    Ramanichandran novels PDF
    srikala novels PDF
    Mallika manivannan novels PDF
    muthulakshmi raghavan novels PDF
    Infaa Alocious Novels PDF
    N Seethalakshmi Novels PDF
    Sashi Murali Tamil Novels PDF Download



    ReplyDelete
  25. Ubiqcom15 December 2021 at 01:04

    UBIQCOM is a GPON ONU Router Manufacturer and Supplier in India. It offers a range of benefits including higher bandwidth, better download speed, faster uploads, higher transmission efficiency and so much more. UBIQCOM is the best GPON router in India and also provides the best GPON router price.

    ReplyDelete
  26. the study iQ20 December 2021 at 12:49

    post... thanks For Sharing !!Great information for new guy like
    Hanuman Chalisa Lyrics
    Bhagwat Geeta in Hindi PDF
    sarvanam

    ReplyDelete
  27. Oliver 13 January 2022 at 21:30

    Never miss a stock price change from Gmhi Stock with our Live, Real Time Stock Market Overview! Most of the data is updated every 5 minutes to ensure that you are getting all of the latest Acam Stock change alerts as soon as they happen.

    ReplyDelete
  28. Elena James14 January 2022 at 04:42

    The Where To Buy Ubx Coin is a cryptocurrency with a set price of $1.00. It is the only cryptocurrency that offers the most value for the money, with an equal value of 1000 coins per dollar. Find the best place where to buy Ubx coin today by reading this article!

    ReplyDelete
  29. Steven Cohen17 January 2022 at 05:19

    Get the latest Ftoc Stock quotes, news and trends at your fingertips across all of your devices, available 247. Our stock quote system helps financial professionals keep up on the latest data and locate charts to help in their own business.

    ReplyDelete
  30. Cracked Softwares8 February 2022 at 13:40

    Nice information. I’ve bookmarked your site, and I’m adding your RSS feeds to my Google account to get updates instantly. Re Loader Activator Crack

    ReplyDelete
  31. weedy23 February 2022 at 07:03






    Buy Cow /Ox Gallstone Available On Stock Now @ (WhatsApp: +237673528224)

    DESCRIPTION
    -Full substance,
    -100% machine flayed
    -No ticks, no scratches, no humps
    -Size: 32 to 40 sq. ft.
    -Average size: 36 sq. ft.
    -Weight: 22kgs to 32kg
    -Average weight: 25kgs
    -Selection: 80% A/B, 20% C/D
    -Male 75% / Female 25%
    -1 x 40 container = 1700-2000 hides
    -Availability: 10 x 40 ft container
    - Impurity: No sand, No dust, No mud, No foreign object, no fats and no meat
    - Not available: No hair slip problem, No rotten Hides, No fats and meat on the Hides, No

    mule
    - No Holes, No Cuts, No Reheated,
    -Sand: non and clean from any other dust or mud.

    All Inquiries Below

    Email: infodocuments4@gmail.com
    WhatsApp: +237673528224


    Cow /Ox Gallstones

    Specifications

    Cow /Ox Gallstones for sale for (wholestone / brokenstone ratio is 80% / 20% )
    We are full time exporters of high quality natural ox gallstone.
    Our product obtained from disease free cattle.
    We can supply up to 10 Kg. monthly. Shipment prompt by air courier (DHL).

    Price depends on the ratio of wholestone / brokenstone.

    wholestone / brokenstone ratio is 80% / 20%
    wholestone / brokenstone ratio is 70%/30%
    wholestone / brokenstone ratio is 60%/40%

    Functions:

    To clear heat and release toxins.
    To eliminate endogenous wind and stop convulsions.
    to resolve phlegm and promote resuscitation.If you wish to try out what we
    have,then we will be so much so pleased to get your inquiry.

    ReplyDelete
  32. Anonymous21 March 2022 at 00:52

    This comment has been removed by the author.

    ReplyDelete
  33. Anonymous21 March 2022 at 00:53

    thank you for sharing this one! glad that i bumped into this which is will definitely going to use to sell our one of House and Lot in the Philippines

    ReplyDelete
  34. Unknown22 March 2022 at 19:55

    Short but informative blog! affordable housing

    ReplyDelete
  35. platinx13 June 2022 at 00:55

    This comment has been removed by the author.

    ReplyDelete
  36. Anonymous6 October 2022 at 23:23


    춘천콜걸
    칠곡콜걸
    태백콜걸
    안성콜걸
    안성콜걸


    태백콜걸
    예천콜걸
    충남콜걸
    화성콜걸
    화성콜걸

    ReplyDelete
  37. NathanPass11 December 2022 at 05:09

    Hello! Many users can benefit from using our online verb search tool. If you are a student, writer or journalist, you should definitely pay attention to our tool! Our assistant will help you not only find the verbs in the text, but also eliminate all the mistakes you made! >> to be verbs finder

    ReplyDelete
  38. DarenTill14 December 2022 at 06:49

    How to avoid passive voice misuse? You have several options. You can send your text for verification to specialized companies that provide this type of service. And the second option is to use a specialized auxiliary tool. This tool uses algorithms to identify errors and point them out.

    ReplyDelete
  39. NathanPass17 December 2022 at 05:48

    Hello! I want to tell you about such a useful tool as passive voice misuse corrector free! It will easily check your text and identify all the sentences where you made mistakes in using the passive voice. Our assistant gives useful hints with which you can improve your text quickly and for free!

    ReplyDelete
  40. Anonymous6 January 2023 at 04:15

    post... thanks For Sharing !!Great information for new guy like Bhagwat Geeta in Hindi PDF

    ReplyDelete
  41. Anonymous30 January 2023 at 18:56

    post... thanks For Sharing !!Great information for new guy like anuvad kise kahate hain

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Popular Posts