r3_geg
Last Updated: January 21, 2017
·
49.63K
· otupman
45975fcc42c585f7ddd9711e1f5198a7

Keep CSS classes out of your Angular controllers

In Angular (and in general) I'm a big fan of keeping view logic out of my controllers, and one place where I see this not happening is CSS classes and the use of ng-class.

If you're not familiar with ng-class, it's a special directive to allow binding of expressions and have them put as, yes, the class of an element. A very common use of ng-class goes something like this:

<p ng-class="{{active}}">Class applied!</p>
<script>
    function MySimpleCtrl() {
        $scope.active = 'active';
        ...

So in the controller we're setting the particular class that should be displayed; so say we have a class 'inactive' - we simply set the $scope.active variable to 'inactive' and voila, we the class is set in the view.

But ng-class is even cleverer than that:

ng-class accepts three different types of value:

  1. A string value (name of class)
  2. An array of strings (classes to be applied)
  3. An object + expression to evaluate against

And it's option 3 that's of interest; the syntax looks something like this:

ng-class="{object of key/value pairs}[expression to evaluate]"

Basically ng-class evaluates the expression (in the square brackets) and then uses that as the key for the object; the value that the key relates to is the class that applies.

This allows us to turn the $scope.active value into a real boolean (which is really how we're using it) - no view logic in controllers, controllers are easier to test and can be re-used.

Here's the simple example:

<p ng-class="{true: 'active', false: 'inactive'}[isActive]">
    Class applied
!</p>
<script>
    function MySimpleCtrl() {
        $scope.isActive = true;

And you can can see it working in this JSFiddle

If you're using some sort of set of conditional expressions (i.e. toggles) then you can use another, very similar syntax like this:

ng-class="{'selected': isSelected, 'blue': isBlue}"

Here the selected class will be applied if isSelected is true. The same with the blue class. Angular will apply as many of those that are true, so you could set the class to selected and blue.

7 Responses
Add your response

6424

BEAUTIFUL!! This explanation should be in the Angular docs... The example they give there is terrible, and I knew there must be a better way than having to use class names in the controller. Thank you.

over 1 year ago ·
8426
5d93f6581046157a061dfa93e8957dbe

Thank you! Nicely explained and ditto, this should be in the examples

over 1 year ago ·
11698
Abf5bfb25c291e17e965a327899edee2

Your example solved my problem. Thank you.

over 1 year ago ·
11891
53cd1b41344e8c9cbfe65d15975d546a

Thank you so much for this article. I had no idea something like
ng-class="{true: 'active', false: 'inactive'}[isActive]"
was valid. And it was just the thing I was looking for! Curious how you figured that one out :)

over 1 year ago ·
13143
Da470f04558616f31d7e7e67f0ac36bc

1000x thanks Oliver for the simple explaination, and the great simple example

over 1 year ago ·
14982
9ee8f85f7d8fa2a85c351d264acfde6b

Oliver, thanks for the explanation and the simple demo.

over 1 year ago ·
15536
837408461bb4d5dfb38091e3456299bb

Thanks, this was clear and helped.

over 1 year ago ·