3

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...

RussK
  • 33
  • 6

3 Answers3

1

ng-class should work :

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

Working fiddle : http://jsfiddle.net/w2SFr/2/

Jscti
  • 14,096
  • 4
  • 62
  • 87
  • Thanks, but that only allows me to use the issue-status 'as is' for a class name. I need to hyphenate and lower case status values such as 'In Progress' to 'in-progress' – RussK Mar 19 '14 at 19:53
  • Just add a custom filter doing that.. it's straight forward. – Jscti Mar 19 '14 at 20:03
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...

Poyraz Yilmaz
  • 5,847
  • 1
  • 26
  • 28
0

What You are looking for is probably http://docs.angularjs.org/api/ng/directive/ngClass. You may also want to look at AngularJS ngClass conditional

Community
  • 1
  • 1
michas84
  • 177
  • 3
  • 11