在ng-binding上更改文字颜色?
我想改变文本的颜色,如果它之前应该绑定类文本的成功,如果在时间应该绑定类文本的危险,但其没有工作..在ng-binding上更改文字颜色?
<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"
}]
}
]
如果您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' }">
你缺少周围的类名引号。它应该是这样的:
<td ng-class="{'text-success': entries.key_results[0].status == 'Pending', 'text-danger': entries.key_results[0].status == 'On Time' }">
的jsfiddle与working styling
对不起,这是错字。我编辑的疑问句 – atjoshi
@atjoshi更新的答案与正确的修复和工作的jsfiddle –
宾果游戏:)谢谢.. – atjoshi
:)很乐意帮助你,cheerz –