InnerHTML匹配时，将文本颜色从指令更改

Question

我有一个页面，我在NG-Repeat的帮助下渲染许多列。

html

  <div ng-repeat="col in selectedColumn" class="cellHldr ng-status-color">{{lead[col.name]}}</div>

现在我已经制作了指令 ngstatuscolor

.directive('ngStatusColor', function () {
    return {
        restrict: "C",
        compile: function (tElement, tAttributes) {
            return {
                post: function postLink( scope, element, attributes ) {
                    console.log("element",element[0].innerHTML );
                    if(element[0].innerHTML=='Open'){
                        console.log("hellooo");
                    }
                }
            }
        }
    }
});

我需要为具有 {{lead[col.name]}}的列文本上色，例如'open'，'''，''。休息应为

Answer 1

由于您要采用InnerHTML的方式，因此您只需在内部HTML上添加字体标签即可更改颜色：

 if(element[0].innerHTML=='Open'){
       element[0].innerHTML="<font color='red'>"+element[0].innerHTML+"</font>";
 }

做到这一点的角度方法是使用ng-class .ON您的div，其中包括以下内容：

ng-class="{ 'red': lead[col.name]=='Open', blue: lead[col.name]=='close' }"

并创建两个红色和蓝色的CSS类：

.red {
 color: red;
}
.blue {
 color: blue;
}

如果lead[col.name]的值变为"打开"，则将red类分配给您的元素时，这将是什么，如果" close"。

。

如果您想获得有关NG级的更多信息，我建议您通过此链接：NG级使用

Answer 2

使用ng-class。

CSS

.colorChange {
    color: green;
}

html

<div ng-repeat="col in selectedColumn" class="cellHldr ng-status-color" ng-class="lead[col.name] === 'open' ? 'colorChange': 'normalStyle'">{{lead[col.name]}}</div>

这种方法会起作用吗？

Answer 3

if(element[0].innerHTML=='Open'){
  element[0].style.color = "red";
}