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

42 comments:

  1. thanks for this post I was looking since many days

    ReplyDelete
  2. Thanks! It was quick help.

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

    ReplyDelete
  4. thanks .. Remove class code snippet really helped me.

    ReplyDelete
  5. thanks .. Remove class code snippet really helped me.

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

    ReplyDelete
  7. 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. var jsEl = document.querySelectorAll('.red');

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

      Delete
  8. 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. Thank you for sharing this Wonderful information.

    Ionic course | Ionic Training

    ReplyDelete
  10. 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. 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. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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





  23. 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
  24. This comment has been removed by the author.

    ReplyDelete
  25. 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
  26. This comment has been removed by the author.

    ReplyDelete
  27. 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
  28. 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
  29. 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
  30. post... thanks For Sharing !!Great information for new guy like Bhagwat Geeta in Hindi PDF

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

    ReplyDelete

Blogroll

Popular Posts