Change text color on ng-binding?

Question

I want to change the color of the text, if Pending it should bind class text-success and if On Time it should bind class text-danger, however its not working..

<tr ng-repeat="entries in abc" ng-click="/#/mypage/{{entries._id}}">
                            <td>{{$index}} </td>
                            <td>{{entries.objective}}</td>
                            <td>{{entries.key_results[0].result}}</td>
                            <td ng-class="{text-success: entries.key_results[0].status == 'Pending', text-danger: entries.key_results[0].status == 'On Time' }">
                            {{entries.key_results[0].status}}
                            </td>
                            <td>{{entries.final_score}}</td>
                            <td>{{entries.owner_ids[0]}}</td>
                            <td> <a class="btn btn-sm btn-success"> View OKR </a></td>
                        </tr>

Other data are getting displayed perfectly .. Controller :

$scope.abc = [
          {
            "_id": "560b84bc1bf86c4334dd7233",
        "objective": "My obj",
        ....
            "key_results": [{
                "result": "res1",
                "current_score":0.6,
                "final_score":0.7,
                "status":"Pending"
            },
            {
                "result": "res2",
                "current_score":0.6,
                "final_score":0.7,
                "status":"Pending"
            }]
          },
          {
         "_id": "560b84bc1bf86c4334dd7233",
        "objective": "My obj 2",
        ....
            "key_results": [{
                "result": "res1",
                "current_score":0.6,
                "final_score":0.7,
                "status":"On time",
                "_id": "560bb0a70aea6b067d961653"
            },
            {
                "result": "res2",
                "current_score":0.6,
                "final_score":0.7,
                "status":"On time",
                "_id": "560bb0a70aea6b067d961652"
            }]
          }
    ]

I took ref from: http://jsfiddle.net/TheSharpieOne/NHS73/

Answer 1

if you your ng-class has two words separated by dash - for example text-success then you need pass this as a string like "text-success" if the class name is just a word without dash (-) then you can use as u do in this question.

WHY

check the argument pass to ng-class

{text-success: entries.key_results[0].status == 'Pending', text-danger: entries.key_results[0].status == 'On Time' }

this is a json object, in json object you have key value pairs,

here the first key is text-success & value is equals to entries.key_results[0].status == 'Pending' which is true or false.

the second key is text-danger & value is equals to entries.key_results[0].status == 'On Time' which is true or false.

So if the json object have a keys like text-success then they should be quoted as "text-success" that's the way we deal with json.

SOLUTION

enclose the css classes passed to ng-class with double or single quotes, if the css class is just a word without - separated then don't need the quotes, But if you like to quote the single word classes it's also ok. (think the argument pass to ng-class as a json that's all).

<td ng-class="{'text-success': entries.key_results[0].status == 'Pending', 'text-danger': entries.key_results[0].status == 'On Time' }">

Answer 2

you are missing quotation marks around the class names. it should look like this:

<td ng-class="{'text-success': entries.key_results[0].status == 'Pending', 'text-danger': entries.key_results[0].status == 'On Time' }">

JSFiddle with working styling