更改绑定的文本颜色？

Question

我想更改文本的颜色，如果 Pending 它应该绑定 class text-success，如果 On Time 它应该绑定 class 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/

Answer 1

您缺少 class 名称两边的引号。它应该看起来像这样：

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

JSFiddle 与 working styling

Answer 2

如果你的 ng-class 有两个单词，例如用短划线分隔 - text-success 那么你需要将其作为字符串传递，如 "text-success" 如果 class 名称只是一个没有破折号的单词 (-) 那么你可以像你在这个问题中那样使用.

为什么

检查传递给 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.[=37= 的方式]

解决方案

将传递给 ng-class 的 css class 用 double 或 single 引号括起来，如果 css class 只是一个没有 - 分隔的单词，那么不需要引号，但是如果你想引用单个单词 classes 也可以。 （认为参数传递给 ng-class 作为 json 就这样）.

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

更改绑定的文本颜色？

Change text color on ng-binding?

javascript

angularjs

ng-bind-html

ng-bind