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

Poyraz Yilmaz · Accepted Answer · 2014-03-19 20:28:26Z

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

answered Mar 19, 2014 at 20:28

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jscti · Accepted Answer · 2014-03-19 09:19:09Z

1

ng-class should work :

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

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

answered Mar 19, 2014 at 9:19

Jscti

14.5k5 gold badges66 silver badges92 bronze badges

2 Comments

RussK Over a year ago

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'

Jscti Over a year ago

Just add a custom filter doing that.. it's straight forward.

Community · Accepted Answer · 2017-05-23 10:31:48Z

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

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 19, 2014 at 9:16

michas84

1773 silver badges11 bronze badges

Collectives™ on Stack Overflow

Setting class values in Angular template

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related