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.
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
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteMaking 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
ReplyDeleteThank you very much. Very useful!
ReplyDeleteng class if else
ReplyDeleteng class if else angular 2
AngularJS ng class if else
Angular ng class if else
thanks for the update and example. www.discover.com/activate
ReplyDelete
ReplyDeleteI 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
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
ReplyDeleteI 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 .
ReplyDeletecontact No :- 9885022027
I really like this concept. Hoping to continue the new ideas with professional excellence. Thanks for sharing.
ReplyDeletemywakehealth
www.mymilestoneCard.com
securitasepay
payonlineticket
myinsuranceinfo
mykohlscharge
This is very creative and is perfect for a Super Bowl party. At first glance your guests will be amazed at this setup. Excellent.
ReplyDeletebest cat litter boxes
best cat litter boxes for large cats
It’s hard to come by experienced people about this subject, but you seem like you know what you’re talking about! Thanks
ReplyDeleteLending Club Personal Loan
Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
ReplyDeleteAngularJS online training
best AngularJS online training
top AngularJS online training
Nice Blog !
ReplyDeleteQuickBooks 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.
Aivivu chuyên vé máy bay, tham khảo
ReplyDeletegia ve may bay di my
đặt vé máy bay từ mỹ về việt nam
vé từ nhật bản về việt nam
vé máy bay khứ hồi từ đức về việt nam
lịch bay từ canada về việt nam
ve may bay tu han quoc ve viet nam
khách sạn cách ly
chuyến bay chuyên gia trung quốc
lab furniture suppliers
ReplyDeleteThanks 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온라인카지노 А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온라인카지노사이트 I constantly spent my half an hour to read this web site’s content daily along with a cup
ReplyDeleteof coffee.
바카라사이트 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카지노 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.
ReplyDeleteIt s really amazing here. I want to say that your amazing. I learn and learn a lot of useful information. 메이저안전사이트
ReplyDeleteI will always let you and your words become part of my day because you never know how much you 사설토토사이트
ReplyDelete안전공원추천 in this article. It’s smart, well-written and easy to understand. You have my attention on this
ReplyDeletethis on my iPhone and it looks a ton 먹튀검증 have noticed this weblog. Lastly something not a junk, which we undergo incredibly frequently.
ReplyDeleteYoure 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. 오공슬롯"
ReplyDeleteI think your writing will help me, can you come to me once and help? My site is "메가슬롯
ReplyDeleteThis 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.
ReplyDeletenice post..
ReplyDeletedot net online training india
Greetings! Very useful advice in this particular
ReplyDeletepost! It is the little changes which will make the
most important changes. Thanks for sharing!
스포츠중계
스포츠토토티비
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먹튀검증
프로토
I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post.
ReplyDelete카지노사이트
카지노사이트홈
Here are some links to web-sites that we link to mainly because we consider they may be really worth visiting.
ReplyDelete카지노사이트
바카라사이트
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.
ReplyDeleteI just want to let you know that I just check out your site and I find it very interesting and informative. 카지노사이트
ReplyDelete스포츠중계
ReplyDelete스포츠토토티비
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
This article is truly a pleasant one it helps new web visitors, who are wishing for blogging.
ReplyDelete토토
사설토토
온라인카지노사이트
ReplyDelete온라인카지노
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
It's a really good blog. It's an honor to meet you..보증업체
ReplyDeletetiktok jeton hilesi
ReplyDeletetiktok jeton hilesi
binance referans kimliği
gate güvenilir mi
tiktok jeton hilesi
paribu
btcturk
bitcoin nasıl alınır
Good ・I should definitely pronounce, impressed with your site. เว็บบาคาร่าโดยตรง
ReplyDeleteSo it goes.. สล็อตjoker
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteUID 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.
ReplyDeleteThat's the way to do it! SBOBET777
ReplyDeleteThis was an extremely wonderful post. Thanks for providing this info. fonzie leather jacket
ReplyDeleteoncainven
ReplyDelete완주출장마사지 진안출장마사지 무주출장마사지
ReplyDelete폭스나인 폭스나인 폭스나인
ReplyDelete폭스나인 폭스나인 폭스나인
ReplyDelete대덕구콜걸샵
ReplyDelete진해구콜걸샵
마산회원구콜걸샵
마산합포구콜걸샵
성산구콜걸샵
의창구콜걸샵
군산출장샵
ReplyDelete전주출장샵
김제출장샵
광양출장샵
나주출장샵
목포출장샵
순천출장샵
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.
ReplyDeleteCheck our top-rated assignment service:
Essay help
Biology dissertation help
Coursework writing services
Research paper writing service
Use Bulk whatsApp Sender to Reach your customers at Lighting Speed with Whatso.
ReplyDeleteFeatures:
Grab Contacts from WhatsApp Groups, Fast sending mode, Schedule Sending & Numbers Filter.
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.
ReplyDeleteThis is a really too good post.https://quackitymerch.net/ This article gives truly quality and helpful information.
ReplyDeleteThis is a great post and I enjoy the look of your blog very much. Thanks for sharing
ReplyDeleteBest Collection
Sharetipsinfo provides 90% Accurate indian stock market tips, Intraday Trading tips, Stock Tips and Nifty Future Tips assuring high accuracy.
ReplyDeleteYour blog is perfect, thank you.
ReplyDeleteFollow also the most beautiful porn topics I was looking for sex and found these wonderful sites in the search engine.외국인출장안마
외국인출장안마
종로외국인출장안마
중외국인출장안마
용산외국인출장안마
성동외국인출장안마
광진외국인출장안마
ll as help measures for labo
ReplyDelete먹튀폴리스rers who could lose positions during a progress to a more economical industry.
ReplyDeleteThroughout a similar
먹튀폴리스
time, super quick design brand Shein has delivered a stunning 314,877 styles. Shein is presently
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مع تزايد الحاجة إلى نقل الأثاث، ظهرت العديد من شركات نقل العفش الحديثة التي تتميز بمستوى عالٍ من الجودة والاحترافية. وتشمل مواصفات الشركات المتميزة في هذا المجال ما يلي:
ReplyDeleteالتقنيات الحديثة: تستخدم الشركات المتميزة في هذا المجال أحدث التقنيات والأساليب لنقل الأثاث بأمان، مثل الاستخدام الأمثل للحبال والحبال المضفرة والشاحنات المجهزة خصيصاً لنقل الأثاث.
غرغرينا القدم السكري هي حالة خطيرة تصيب الأشخاص الذين يعانون من مرض السكري والذين يعانون من تلف الأعصاب والأوعية الدموية في الأطراف السفلية. يتميز هذا المرض بتلف الأنسجة والجلد في القدمين والساقين، مما يؤدي إلى ظهور جروح وقروح عميقة
ReplyDeleteتتميز بتقديم افضل شركات تركيب واجهات كلادينج في مصر المنتجات والتي تتميز بكل مما يأتي:
ReplyDeleteتوفير المساحة: يسمح تركيب الواجهات الزجاجية في وجود تصميم أكثر ذكاء وتطبيقات أفضل للمساحات المتوفرة، مما يعني أنه يمكن استخدام المساحة الإجمالية بكفاءة أكبر.
الراحة والتخفيف من التوتر: إذا كان المكان أكثر توفيرًا للضيوف الراحة والنوم الصحي، فإن ذلك يعني أنه يبدأ في تحسين الأداء والنتائج لأنشطة الشركة.
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.
ReplyDeleteA 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.
ReplyDeletethat 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">먹튀뱅크검증커뮤니티
ReplyDeletei'm really impressed that t %A7%80-%EC%9D%B4%EC%9C%A0">온카맨검증커뮤니티
ReplyDeleteReally a great & helpful post!
ReplyDeleteFreedom mobile store Vancouver
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.
ReplyDeleteUnlock 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.
ReplyDeleteI'm truly glad to say it's an intriguing post to read. I get new information from your article.officialbapehoodie.com
ReplyDelete