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

Question

Я хочу, чтобы изменить цвет текста, если Ожидающий он должен связать класс текстового успех и если Вовремя он должен связать класс текст-опасность, однако он не работает ..

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

Answer 1

, если ваш 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' }"> 

Answer 2

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

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

JSFiddle с working styling