Setting class values in Angular template

Question

I'm a bit of an Angular novice an I'm struggling with something I thought would be very simple.

I have a template that is used in a read only version of a form in my app. This template displays a status field that would be styled (text/background colour) based on its value, e.g

'New issue' - orange 'In progress' - green 'Overdue' - red

etc...

My css is something like;

.status-bar {padding: 3px; border: solid 1px #333}
.new-issue {background-color: orange; color: #000}
.in-progress {background-color: green; color: #fff}
.overdue {background-color: red; color: #fff}

The issue status field is available through the controller and i use code something like this to display it.

<div class="status-bar">{{issue.status}}</div>

All works fine.

I then naively tried to simply insert the class name as an expression, e.g

<div class="status-bar {{issue.status}}">{{issue.status}}</div>

Thinking that would give me a this kind of output..

<div class="status-bar overdue">overdue</div>

But it doesn't work. I've looked at the ng-class directive, and other options but can't work this out.

Ideally I need a solution that would allow me to append/insert a class name based on a value (not a true/false like ng-class). So I'd like my oputput HTML to be like the following...

<div class="status-bar in-progress">In Progress</div>

OR

<div class="status-bar new-issue">New Issue</div>

OR

<div class="status-bar overdue">overdue</div>

etc...

The range of status values may change so my class names must be calculated as per the above pattern

e.g,

<div class="status-bar another-status">Another Status</div>

So I need a way to hyphenate and lowercase my issue.status value and then add it as a class name. I presume a directive is the way forward, which would be ideal so I can use it in other views.

This is so easy to do after the fact in jQuery etc..., but I can't see the 'Angular' way to do it?!

Many thanks upfront for any help provided...

Answer 1

ng-class with a custom filter is what you are looking for...

HTML

<h1 ng-class="class1">{{class1 | titleCase}}</h1>

JS

app.filter('titleCase', function () {
  return function (input) {
    var words = input.split('-');
    for (var i = 0; i < words.length; i++) {
      words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
    }
    return words.join(' ');
  }
});

and here is working PLUNKER...