How to use ng-class in angularjs table?

Question

I have 3 css class namely

.green{
  background-color:green
}

.yellow{
  background-color:yellow
}

.red{
  background-color:red
}

And I have a table

which looks like this

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
        <tr class="bg-primary">
            <th>Task Name</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Priority</th>
            <th>Action</th>
            <th ng-hide="true">autoid</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="d in dataintbl">
            <td>{{d.taskname}}</td>
            <td>{{d.taskstartdate}}</td>
            <td>{{d.taskenddate}}</td>
            <td>{{d.taskpriority}}</td>
            <td>
                <a href="#" ng-click="updateuser()" class="btn btn-warning glyphicon glyphicon-edit"></a>
                <a href="#" ng-click="deleteuser()" class="btn btn-danger glyphicon glyphicon-trash"></a>
            </td>
            <td ng-hide="true">{{d.taskmid}}</td>
        </tr>
        </tbody>
    </table>
</div>

now in my <td>{{d.taskpriority}}</td>I have data like

low medium high

now I want to use ng-class in my td and apply css class as per data

if I have (low) in my td, green css class should be apply and so on

what I need to do to achieve this?

[http://stackoverflow.com/a/8309832/6804648](http://stackoverflow.com/a/8309832/6804648) see this for batter understanding — Ushma Joshi, Mar 18 '17 at 12:02

score 3 · Accepted Answer · answered Mar 18 '17 at 06:37

3

This should work.

<td ng-class="{'green': (d.taskpriority == 'low'), 'yellow': (d.taskpriority == 'medium'), 'red': (d.taskpriority == 'high')}">{{d.taskpriority}}</td>

ng-class accepts a map of class names to boolean values. See documentation

answered Mar 18 '17 at 06:37

abhishekkannojia

2,796
23
32

How to use ng-class in angularjs table?

1 Answers1