Изменить цвет текста на ng-binding?

Я хочу изменить цвет текста, если в ожидании он должен связать класс text-success, а если вовремя, он должен связать класс text-danger, однако он не работает.

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

Другие данные отображаются отлично. Контроллер:

$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"
            }]
          }
    ]

Я взял ссылку с: http://jsfiddle.net/TheSharpieOne/NHS73/


person Mr AJ    schedule 05.10.2015    source источник


Ответы (2)


если в вашем ng-class есть два слова, разделенные тире -, например text-success, вам нужно передать это как строку, например "text-success", если имя класса представляет собой просто слово без тире (-), то вы можете использовать то, что вы делаете в этом вопросе.

ПОЧЕМУ

проверьте передачу аргумента на ng-class

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

это объект json, в объекте json у вас есть пары ключ-значение,

здесь первый ключ — text-success, а значение равно entries.key_results[0].status == 'Pending', то есть true или false.

второй ключ — text-danger, а значение равно entries.key_results[0].status == 'On Time', то есть true или false.

Таким образом, если у объекта json есть такие ключи, как text-success, то они должны быть заключены в кавычки как "text-success", так мы поступаем с json.

РЕШЕНИЕ

заключите классы css, переданные в ng-class, с double или single кавычками, если класс css представляет собой просто слово без разделения -, тогда кавычки не нужны, но если вам нравится цитировать классы с одним словом, это тоже нормально. (представьте, что аргумент передается ng-class как json, вот и все).

<td ng-class="{'text-success': entries.key_results[0].status == 'Pending', 'text-danger': entries.key_results[0].status == 'On Time' }">
person Kalhan.Toress    schedule 05.10.2015
comment
:) рад помочь вам, cheerz - person Kalhan.Toress; 05.10.2015

вам не хватает кавычек вокруг имен классов. это должно выглядеть так:

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

JSFiddle с рабочим стилем

person Peter Elliott    schedule 05.10.2015
comment
@atjoshi обновил ответ с правильным исправлением и работающим jsfiddle - person Peter Elliott; 05.10.2015