ng-class if example


How to apply  ng-class if

This example provides two ways using ng-class if expression.
Following directives and services in angularjs will be used:
  • ng-classs
  • ng-model
  • ng-repeat
 <!doctype html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <title>AngularJS ng-class if example</title>  
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>  
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">  
   <style>  
     .Red {  
       color: Red;  
     }  
     .Yellow {  
       color: Yellow;  
     }  
      .Blue {  
       color: Blue;  
     }  
      .Green {  
       color: Green;  
     }  
     .Gray {  
       color: Gray;  
     }  
      .b{  
        font-weight: bold;  
     }  
   </style>  
   <script>  
     angular.module('myapp', [])  
         .controller('ExampleController', ['$scope', function ($scope) {  
           $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];  
           $scope.getClass = function (strValue) {  
             if (strValue == ("It is Red"))  
               return "Red";  
             else if (strValue == ("It is Yellow"))  
               return "Yellow";  
             else if (strValue == ("It is Blue"))  
               return "Blue";  
             else if (strValue == ("It is Green"))  
               return "Green";  
             else if (strValue == ("It is Gray"))  
               return "Gray";  
           }  
       }]);  
   </script>  
 </head>  
 <body ng-app="myapp" ng-controller="ExampleController">  
   <h2>AngularJS ng-class if example</h2>  
   <ul >  
     <li ng-repeat="icolor in MyColors" >  
       <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>  
     </li>  
   </ul>  
   <hr/>  
   <p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>  
   <ul>  
     <li ng-repeat="icolor in MyColors">  
       <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>  
     </li>  
   </ul>  
 </body>  
 </html>  

Demo
 
Here is result screen shot

If you have other ways can share to everybody.





74 comments:

  1. I have list of stage name.stage start with three cateogry Application,Interview,Offer using the prefix i want to show diffrent the stages with colors ex:Application-Waiting for confirmation Try to give some suggestion

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Making a personal statement more personal could help a college admissions committee get to know you better. Giving them a chance to see something unique about you and giving them a reason to accept you is the goal of a college essay. See more mba statement of purpose sample

    ReplyDelete
  4. Thank you very much. Very useful!

    ReplyDelete

  5. I like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep postingangular course

    ReplyDelete
  6. I have list of stage name.stage start with three cateogry Application,Interview,Offer using the prefix i want to show diffrent the stages with colors ex:Application-Waiting for confirmation Try to give some suggestion. U Can also have many tutorials in the angular js training and also for other courses check our website SVR Technologies

    ReplyDelete
  7. I have list of stage name.stage start with three cateogry Application,Interview,Offer using the prefix i want to show diffrent the stages with colors .Here is the best angular js training with free Bundle videos .

    contact No :- 9885022027

    ReplyDelete
  8. I really like this concept. Hoping to continue the new ideas with professional excellence. Thanks for sharing.
    mywakehealth
    www.mymilestoneCard.com
    securitasepay
    payonlineticket
    myinsuranceinfo
    mykohlscharge

    ReplyDelete
  9. This is very creative and is perfect for a Super Bowl party. At first glance your guests will be amazed at this setup. Excellent.
    best cat litter boxes
    best cat litter boxes for large cats

    ReplyDelete
  10. It’s hard to come by experienced people about this subject, but you seem like you know what you’re talking about! Thanks
    Lending Club Personal Loan

    ReplyDelete
  11. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    AngularJS online training
    best AngularJS online training
    top AngularJS online training

    ReplyDelete
  12. Nice Blog !
    QuickBooks is an accounting software that helps you record the flow of your company's finance. In case you want immediate help to solve QuickBooks issues, call us on QuickBooks Customer Support Number and get in touch with our experts.

    ReplyDelete
  13. Thanks for sharing such useful information with us. I hope you will share some more info about your blog. Please keep sharing. We will also provide QuickBooks Customer Service Phone Number for instant help.

    ReplyDelete
  14. 온라인카지노 Аs tҺe аdmin oof this site іs աorking, no uncertainty very shօrtly іt will be well-known, due to its feature contents.

    ReplyDelete
  15. 온라인카지노사이트 I constantly spent my half an hour to read this web site’s content daily along with a cup
    of coffee.

    ReplyDelete
  16. 바카라사이트 If more people that write articles really concerned themselves with writing great content like you, more readers would be interested in their writings. Thank you for caring about your content.

    ReplyDelete
  17. 카지노 Amazing article sir. A great information given by you in this blog. It really informative and very helpful. Keep posting will be waiting for your next blog.Thank you.

    ReplyDelete
  18. It s really amazing here. I want to say that your amazing. I learn and learn a lot of useful information. 메이저안전사이트

    ReplyDelete
  19. I will always let you and your words become part of my day because you never know how much you 사설토토사이트

    ReplyDelete
  20. 안전공원추천 in this article. It’s smart, well-written and easy to understand. You have my attention on this

    ReplyDelete
  21. this on my iPhone and it looks a ton 먹튀검증 have noticed this weblog. Lastly something not a junk, which we undergo incredibly frequently.

    ReplyDelete
  22. Youre so right. Im there with you. Your weblog is definitely worth a read if anyone comes throughout it. Im lucky I did because now Ive received a whole new view of this. 오공슬롯"


    ReplyDelete
  23. I think your writing will help me, can you come to me once and help? My site is "메가슬롯


    ReplyDelete
  24. This is the perfect post.사설토토사이트 It helped me a lot. If you have time, I hope you come to my site and share your opinions. Have a nice day.


    ReplyDelete
  25. Greetings! Very useful advice in this particular
    post! It is the little changes which will make the
    most important changes. Thanks for sharing!

    스포츠중계
    스포츠토토티비

    ReplyDelete
  26. This is very nice blog and informative. I have searched many sites but was not able to get information same as your site. I really like the ideas and very intersting to read so much and Please Update and i would love to read more from your site

    먹튀검증
    프로토

    ReplyDelete
  27. Here are some links to web-sites that we link to mainly because we consider they may be really worth visiting.

    카지노사이트
    바카라사이트

    ReplyDelete
  28. This is a very impressive subject. Thank you for always. I have been reading your article interestingly. If possible, please visit my website to read my posts and leave comments. Have a nice day! 바카라사이트 What you wrote was very helpful to me. Thank you. Actually, I run a site similar to you. If you have time, could you visit my site? Please leave your comments after reading what I wrote. If you do so, I will actively reflect your opinion. I think it will be a great help to run my site. Have a good day.


    ReplyDelete
  29. I just want to let you know that I just check out your site and I find it very interesting and informative. 카지노사이트

    ReplyDelete
  30. 스포츠중계
    스포츠토토티비


    Great post. I was checking constantly this blog and I’m impressed!Very useful information specifically the last part 🙂 I care for such info much. I was seeking this certain info for a very long time.Thank you and best of luck.My blog post

    ReplyDelete
  31. This article is truly a pleasant one it helps new web visitors, who are wishing for blogging.


    토토
    사설토토

    ReplyDelete
  32. 온라인카지노사이트
    온라인카지노


    Think about the sorts of items you use a lot of in a two-week period. Paper goods are probably at the top of this list, including things

    ReplyDelete
  33. It's a really good blog. It's an honor to meet you..보증업체

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. UID fashion designing course in surat is one of the Leading fashion institute in surat. professional fashion designing course in India is in demand these day by day, what can be best than pursuing fashion designing course from the fashion capital of India itself. Yes,UID fashion designing course in surat are talking about the city of surat, where you can have ample select when it comes to fashion design.

    ReplyDelete
  36. This was an extremely wonderful post. Thanks for providing this info. fonzie leather jacket

    ReplyDelete
  37. Such a wonderful post. Thank you so much for taking the time to put this together. We give students with assignment writing services that are tailored to their unique requirements.
    Check our top-rated assignment service:
    Essay help
    Biology dissertation help
    Coursework writing services
    Research paper writing service

    ReplyDelete
  38. Use Bulk whatsApp Sender to Reach your customers at Lighting Speed with Whatso.
    Features:
    Grab Contacts from WhatsApp Groups, Fast sending mode, Schedule Sending & Numbers Filter.

    ReplyDelete
  39. Nice blog and absolutely outstanding.https://chukkabootsmaker.com/ You can do something much better but i still say this perfect. Keep trying for the best.

    ReplyDelete
  40. This is a really too good post.https://quackitymerch.net/ This article gives truly quality and helpful information.

    ReplyDelete
  41. This is a great post and I enjoy the look of your blog very much. Thanks for sharing
    Best Collection

    ReplyDelete
  42. Sharetipsinfo provides 90% Accurate indian stock market tips, Intraday Trading tips, Stock Tips and Nifty Future Tips assuring high accuracy.

    ReplyDelete
  43. Your blog is perfect, thank you.
    Follow also the most beautiful porn topics I was looking for sex and found these wonderful sites in the search engine.외국인출장안마
    외국인출장안마
    종로외국인출장안마
    중외국인출장안마
    용산외국인출장안마
    성동외국인출장안마
    광진외국인출장안마

    ReplyDelete
  44. ll as help measures for labo
    먹튀폴리스rers who could lose positions during a progress to a more economical industry.

    ReplyDelete

  45. Throughout a similar
    먹튀폴리스
    time, super quick design brand Shein has delivered a stunning 314,877 styles. Shein is presently

    ReplyDelete
  46. Thanks for sharing. Beglobalus offers the SEO Services in Los Angeles that focuses on putting high-performing SEO methods into practice. Our team of specialists has the skills and experience required to raise the position of your website in search engine results.

    ReplyDelete
  47. مع تزايد الحاجة إلى نقل الأثاث، ظهرت العديد من شركات نقل العفش الحديثة التي تتميز بمستوى عالٍ من الجودة والاحترافية. وتشمل مواصفات الشركات المتميزة في هذا المجال ما يلي:
    التقنيات الحديثة: تستخدم الشركات المتميزة في هذا المجال أحدث التقنيات والأساليب لنقل الأثاث بأمان، مثل الاستخدام الأمثل للحبال والحبال المضفرة والشاحنات المجهزة خصيصاً لنقل الأثاث.

    ReplyDelete
  48. غرغرينا القدم السكري هي حالة خطيرة تصيب الأشخاص الذين يعانون من مرض السكري والذين يعانون من تلف الأعصاب والأوعية الدموية في الأطراف السفلية. يتميز هذا المرض بتلف الأنسجة والجلد في القدمين والساقين، مما يؤدي إلى ظهور جروح وقروح عميقة

    ReplyDelete
  49. تتميز بتقديم افضل شركات تركيب واجهات كلادينج في مصر المنتجات والتي تتميز بكل مما يأتي:
    توفير المساحة: يسمح تركيب الواجهات الزجاجية في وجود تصميم أكثر ذكاء وتطبيقات أفضل للمساحات المتوفرة، مما يعني أنه يمكن استخدام المساحة الإجمالية بكفاءة أكبر.
    الراحة والتخفيف من التوتر: إذا كان المكان أكثر توفيرًا للضيوف الراحة والنوم الصحي، فإن ذلك يعني أنه يبدأ في تحسين الأداء والنتائج لأنشطة الشركة.

    ReplyDelete
  50. The process of finishing a top-notch academic dissertation might be drawn out and laborious. But it gets even more complicated when it comes to a challenging subject like nursing. Therefore, scholars primarily seek out reputable nursing dissertation help in order to easily prepare an effective dissertation.

    ReplyDelete
  51. A Case Study Assignment Helpis a process used to examine individuals, a group of individuals, or any events in detail. The case study's requirements and real facts make it exceedingly difficult and complex to examine. Assignments including case studies enable students to analyse the cause and effect of any events by creating an image of them. An analysis of a case study is possible in many fields, including education, medicine, psychology, political science, and social work. Many other reasons can be attributed to learning one case study.

    ReplyDelete
  52. that is an first rate detail for sharing this benef%EC%A2%8B%EC%95%84%ED%95%98%EB%8A%94-%EA%B2%83%EC%9E%85%EB%8B%88%EA%B9%8C/?snax_post_submission=success">먹튀뱅크검증커뮤니티

    ReplyDelete
  53. i'm really impressed that t %A7%80-%EC%9D%B4%EC%9C%A0">온카맨검증커뮤니티

    ReplyDelete
  54. WhatsApp is one of the most popular messaging apps worldwide, with over two billion users. While it is a powerful tool for personal and business communication, some individuals and organizations have explored the idea of using bulk WhatsApp sender software to send messages to large groups of people simultaneously. In this blog post, we'll discuss what bulk WhatsApp sender software is, its potential risks and benefits, and the ethical considerations that should guide its use.

    ReplyDelete
  55. Unlock seamless cloud migration with Supportfly, your trusted cloud migration service provider. Our expert team ensures a smooth transition, minimizing downtime and maximizing efficiency. Elevate your business to new heights with our tailored solutions. Embrace the future with Supportfly – Your Cloud Migration Partner.

    ReplyDelete
  56. Love reading your blog! And that Balenciaga Hoodie Mens you mentioned? It's the perfect combination of comfort and high-end fashion.

    ReplyDelete
  57. Thanks for sharing a piece of knowledge! Look forward into another blog. Attending one of India’s Best MBA Colleges opens doors to unparalleled opportunities. With a diverse curriculum, esteemed faculty, and vibrant campus life, students are equipped to excel in their fields. The strong alumni network fosters connections that last a lifetime, enhancing career prospects. It’s a transformative experience that shapes future leaders!
    https://iirfranking.com/ranking/top-mba-colleges-in-india

    ReplyDelete

Popular Posts