How do I add a class based on the element's value in Angular?

Question

I'm new to Angular and I'm trying to add a class to a table row based on the value of the array it's looping over, as below:

        <tbody>
            <tr ng-repeat="change in changes|filter:query|orderBy:predicate:reverse">
                <td>{{change.Infrastructure_Change_ID}}</td>
                <td  ng-class="{red: '{{change.Executive_Summary}}' === 'Undefined'}">{{change.Executive_Summary}}</td>
            </tr>
        </tbody>

The Executive_Summary contains free text, and it will correctly match 'Undefined' and apply class 'red'. However this text can contains quotes, slashes and all sorts of characters that break angular. I'm sure there is a way of adding class 'red' without all the 'Unterminated quote at column..' I have in my log now.

Any suggestions?

Mark Coleman · Accepted Answer · 2013-06-25 01:11:23Z

1

ngClass accepts an expression so you shouldn't need to worry about escaping quotes.

<td ng-class="{red: (change.Executive_Summary == undefined)}">
  {{change.Executive_Summary}}
</td>

Example on jsfiddle

answered Jun 25, 2013 at 1:11

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

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

1 Comment

alpinescrambler Over a year ago

What about if I want to apply the class to the tr element itself?

Collectives™ on Stack Overflow

How do I add a class based on the element's value in Angular?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related