Blog

ngClass expressions in AngularJS

31 Jan, 2014

AngularJSThe ngClass directive allows you to dynamically set CSS classes by databinding an expression. The documentation on angularjs.org is pretty clear how to write different kind of expressions but not everything is documented. I will briefly explain the documented expressions and also the one that is not documented.


String syntax

The string syntax is straightforward, the value of the input element will directly added as a CSS class on the legend element.
[code language=”html”]
<!DOCTYPE html>
<html ng-app>
<head>
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.10" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form role="form">
<fieldset>
<legend ng-class="text">String syntax</legend>
<div class="form-group">
<input class="form-control" ng-model="text" placeholder="Type: text-info, text-warning or text-danger"><br>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
[/code]

Array syntax

The array syntax behaves the same as the string syntax but that it allows you to add more then one CSS class on a single HTML element.
[code language=”html”]
<!DOCTYPE html>
<html ng-app>
<head>
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.10" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form role="form">
<fieldset>
<legend ng-class="[label, text]">Array syntax</legend>
<div class="form-group">
<input class="form-control" ng-model="label" placeholder="Type: label-info, label-warning or label-danger"><br>
<input class="form-control" ng-model="text" placeholder="Type: text-muted or text-success"><br>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
[/code]

Map syntax

The map syntax allows you to set the CSS class based on comma separated key-value pairs. In the following example the CSS class label-info is added when the value of info is true. If the values of info and muted are both true then both CSS classes are added. So for all the expressions whose values are true the CSS class is added.

[code language=”html”]
<!DOCTYPE html>
<html ng-app>
<head>
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.10" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<fieldset>
<legend ng-class="{‘label-info’: info, ‘text-muted’: muted}">Map syntax</legend>
<div class="form-group">
<input type="checkbox" ng-model="info"> info (apply "label-info" class)<br>
<input type="checkbox" ng-model="muted"> muted (apply "text-muted" class)
</fieldset>
</div>
</div>
</body>
</html>
[/code]

Undocumented expression syntax

The previous examples are well documented and the examples speak for themselves. But what if you want to mark a required input element of a form invalid after you have submitted the form? Though it is not documented it is possible.

First we have to keep track if the form is submitted. When the controller is invoked the first time the scope variable submitted is set to false. After the form is submitted the scope variable submitted is set to true. After that we check if the form is invalid. If the form is invalid we return to the page or else we can do something with the form data like posting it to a backend for example.

[code language=”javascript”]
‘use strict’;
angular.module(‘myApp’, []).
controller(‘MyAppCtrl’, function() {
this.submitted = false;
var self = this;
this.submit = function(form) {
self.submitted = true;
if (form.$invalid) {
return;
} else {
// Do something with the form like posting it to the backend
}
}
});
[/code]

So how can we write an expression for the ngClass directive that checks if the scope variable submitted is true and if the value of the input element is invalid? The HTML provides the solution.

[code language=”html”]
<!doctype html>
<html ng-app="myApp">
<head>
<link src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.angularjs.org/1.2.10/angular.min.js"></script>
</head>
<body ng-controller="MyAppCtrl as ctrl">
<div class="container">
<div class="row">
<form class="form-horizontal" name="myForm" novalidate>
<fieldset>
<div class="form-group" ng-class="{true: ‘has-error’}[ctrl.submitted && myForm.myField.$error.required]">
<label for="myField" class="control-label">My Field</label>
<input type="text" name="myField" class="form-control" id="myField" ng-model="myField" required/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-click="ctrl.submit(myForm)">Save</button>
</div>
</fieldset>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
[/code]

How does it work? The expression between the square brackets is evaluated. If the result of that expression is equal to true, then the CSS class has-error is added. That is it. To see the code in action go to this Plunker

guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Bastien
Bastien
8 years ago

Actually, you can directly write your condition in the map syntax:
{‘has-error’: ctrl.submitted && myForm.myField.$error.required}
See it in this plunker:
http://plnkr.co/edit/xDIzC0A50cXxMpIHeP3C

Vibhor Mahajan
Vibhor Mahajan
8 years ago
Reply to  Bastien

+1

virender
virender
7 years ago

Nice One! We can use more with ng-class , see on this blog Nice blog. I also like this blog http://goo.gl/qfEQZw

Lewis Huynh
Lewis Huynh
6 years ago

It’s a good post really. You can use function, let look at full code page at http://angularjsaz.blogspot.com/2015/09/ng-class-if-example.html

piccosoft
2 years ago

Your blog is very nice… I got more information about your blog page… Thanks for sharing your information…

Explore related posts