AngularJS ng-class Directive

The AngularJS ng-class directive is used to set css class dynamically.

Syntax

<p ng-class="{margin:1px;font-family:Cambria;font-size:20px;}">Class Example</p>

AngularJS ng-class Directive Example

<html>
<head>
<title>My first AngularJS ng-class Directive code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
//Defining Controller Using Standard Javascrip Object Constructor
function CustomerController($scope) {
$scope.siteName = "www.techstrikers.com";
$scope.clicked = function()
	{
		$scope.siteCSS = "{font-family:Cambria;font-size:20px;}";
	};
}
</Script>
</head>
<body>
<div ng-app="">
<div ng-controller="CustomerController"> 

<input id="btnButton" type="button" value="Change Font" ng-change="clicked">
<span class="base-class" ng-class="siteCSS">{{ siteName }}</span>
</div>
</div>
</body>
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-class Directive

AngularJS ng-class Directive Example

Recent Articles