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]}}类似于＆＃39;打开＆＃39;已关闭＆＃39;。休息应保持原样

Answer 1

由于你要使用innerHtml方式，你可以在内部html中添加一个字体标签来改变颜色：

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

执行此操作的有条理方式是使用ng-class。在div上放置以下内容：

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

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

.red {
 color: red;
}

.blue {
 color: blue;
}

如果red的值变为＆＃39;打开＆＃39;那么这将会为您的元素指定lead[col.name]类。，蓝色如果＆＃39;关闭＆＃39;。

如果您想获得有关ng-class的更多信息，我建议您浏览此链接：ng-class uses

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";
}

当innerHTML匹配时，从指令更改文本颜色

3 个答案: