Question

我想改变文本的颜色，如果Pending它应该绑定类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

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

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

JSFiddle with working styling

Answer 2

如果您的ng-class有两个单词由短划线-分隔，例如 text-success然后你需要将它作为"text-success"之类的字符串传递，如果类名只是一个没有短划线的单词（-）那么你可以像在这个问题中一样使用。

<强> WHY

检查参数传递给ng-class

{text-success: entries.key_results[0].status == 'Pending', text-danger: entries.key_results[0].status == 'On Time' }

这是一个json对象，在json对象中你有键值对，

这里的第一个关键是text-success＆amp;值等于entries.key_results[0].status == 'Pending' true或false。

第二个关键是text-danger＆amp;值等于entries.key_results[0].status == 'On Time' true或false。

因此，如果json对象有text-success之类的键，则应引用"text-success"作为我们处理json的方式。

<强>解

如果css类只是一个没有ng-class分隔的单词，那么

将传递给double的css类与single或-引号括起来，然后不需要引号，但如果你想引用单词类，它也可以。 （认为参数传递给ng-class作为所有的json 。

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

更改ng-binding上的文字颜色？

2 个答案: