AngularJs Conditional CSS Class Style

AngularJs Conditional CSS Class and CSS Style

Hello everyone, I am going to share the code sample for apply the css class and css style in AngularJs with and without conditions.

The example as given below in details.

Use of  CSS Class in AngularJs

<div ng-repeat="user in users" ng-class="{class-active': user.isActive}">
  <label ng-show="!(user.isDeleted)">
    <input type="checkbox" ng-model="user.isActive" />
    <span>{{user.UserName}}</span>
  </label>
</div

Use of  CSS style in AngularJs

<div ng-repeat="user in users" ng-style="{color: myColor}">
  <label ng-show="!(user.isDeleted)">  </label>
</div

OR

<div ng-repeat="user in users" ng-style="{width: user.isValid == 'Invalid'  ?  0% : 100%}">
  <label ng-show="!(user.isDeleted)">  </label>
</div




ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book