0

我想更改文本的颜色，如果 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/

4

2 回答 2

1

您在类名周围缺少引号。它应该是这样的：

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

带有工作样式的 JSFiddle

于 2015-10-05T17:24:41.180 回答
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'which is trueor false。

第二个键是text-danger& 值等于entries.key_results[0].status == 'On Time'which is trueor false。

因此，如果json对象有一个类似text-successthen 的键，那么它们应该被引用，因为"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' }">
于 2015-10-05T17:39:34.307 回答