在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的方式。

SOLUTION

附上传递给ng-class与double或single报价CSS类，如果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