InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

AngularJS

  • Hello world
  • ng-init
  • ng-model
  • Controller to increment value
  • Controller - basic clock
  • Controller - ajax
  • date filter
  • include template (url)
  • include template (inline)
  • tabs using ng-switch
  • conditional style using ng-style
  • animation with ng-class
  • ng-if vs ng-hide/ng-show

AngularJS Directives

  • ng-bind
  • ng-bind-html
  • ng-bind-template
  • ng-blur
  • ng-change
  • ng-checked
  • ng-class
  • ng-class-even and ng-class-odd
  • ng-click
  • ng-cloak
  • ng-dblclick
  • ng-disabled
  • ng-focus
  • ng-hide
  • ng-href
  • ng-if
  • ng-list
 
  • Home
  • > Tutorials
  • > Javascript
  • > AngularJS

AngularJS ng-class example

on Jul 24, 2016

AngularJS ng-class directive allows you to dynamically set CSS classes on an element using an expression. The expression can be of one of these three types.

  1. String (one or more space delimited classes). e.g.
    <div ng-class="style1"</div>
    <div ng-class="style1 stye2"</div>

  2. object (key is class name and it value can be true/false). All object keys with true value are applied as classes to element. e.g.
    <div ng-class="{class1: isClass1, class2: isClass2}"</div>

  3. array (it can contains string and objects). e.g.
    <div ng-class="[style1, style2, style3]"</div>

Example

<style>
.redBg {background-color: red;}
.blueBorder {border: 2px solid blue;}
</style>

<div ng-app="myApp" ng-controller='MyCtrl'>
  Set red background: <input type="checkbox" ng-model="isRedBg">{{isRedBg}}<br>
  Set Blue border: <input type="checkbox" ng-model="isBlueBorder"><br>
  <div ng-class="{redBg: isRedBg, blueBorder: isBlueBorder}">Hello</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
  var module = angular.module('myApp', []);
  module.controller('MyCtrl', function($scope) {});
</script>
refresh done
try it online

Suggested posts:

  1. AngularJS ng-if vs ng-hide/ng-show
  2. AngularJS ng-checked example
  3. AngularJS ng-disabled – conditionally disable an element
  4. AngularJS ng-hide – conditionally hide an element
  5. AngularJS ng-bind example
  6. AngularJS ng-if – conditional dom tree
  7. AngularJS ng-blur example
  8. AngularJS ng-focus example
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged AngularJS, Javascript, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress