javascript - 更改 ng-binding 上的文本颜色？

Question

我想更改文本的颜色，如果待处理它应该绑定(bind)类文本成功，如果按时它应该绑定(bind)类文本危险，但是它不起作用..

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

其他数据正在完美显示.. Controller :

$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 的方式.

解决方案

包含传递给 ng-class 的 css 类与 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' }">