动态更改CSS Unicode内容属性

我在div标签中设置背景，该标签是表中每行的字体超棒图标。此图标取决于正在显示的对象。我尝试设置类似于Changing CSS content property dynamically的代码。但是，我的数据内容将是一个unicode。我在角控制器分配所述值如下：动态更改CSS Unicode内容属性

if (type) { 
    if (type.image.includes('fa-hand-o-up')) { 
     type.background = '\f0a6'; 
    } else if (type.image.includes('fa-wrench')) { 
     type.background = '\f0ad'; 
    } else if (type.image.includes('fa-star')) { 
     type.background = '\f005'; 
    }    
    return type; 
}

，然后将它们包括在表如下：

<td> 
    <div class="text-center type-wrapper" 
     data-content="{{::dataItem.type.background}}"> 
     <span class="bold">{{::dataItem.type.name}}</span> 
    </div> 
</td>

然而，这只是把0A6，0AD，和005为背景'图片'。有没有一种方法可以动态地添加unicode内容，或者是纯文本的attr（data-xxx）？

此外，我试着添加一个attr（数据颜色）的颜色，但似乎也没有工作。那也是因为我使用十六进制代码而不是纯文本？

来源

2017-04-24 ChristyPiffat

HTTP：/ /stackoverflow.com/questions/36197443/use-fontawesome-icon-inside-a-before-pseudo-element-with-attr –

描述的方法可以工作，但不适用于AngularJS。他们的问题是，您需要将这些值硬编码到HTML中的data-content属性中。我需要动态使用Angular。经过一番调查后，我需要某种ng-xxx属性才能添加到页面中。有一个ng-attr-xxx，你可以使用，但我无法得到它的工作。还有一种ng风格，但是你需要在某个地方构建风格，然后将控制器中的风格混合到比我想要的更多。 – ChristyPiffat

^{如果我正确地得到了你的问题...}
尝试&#x参考前缀

span:before{ 
 
    content: attr(data-content); 
 
}

<span data-content="&#x00ff;"></span>

引用开始&#与;结束和x指的二手什么是一个十六进制值的值。

来源

2017-04-24 22:18:07

如果我能够对HTML进行硬编码，那么这很有效。但是，我在ng-repeat中运行该内容，其内容取决于该记录的dataItem.type。对于Angular，似乎只能使用ng-xxx来获取动态属性。 – ChristyPiffat

这为我工作：在这种格式https://stackoverflow.com/a/26025865/2077405

插入，用带有\ U，在JavaScript中，表示一个字符串内的 Unicode数字
$("a").attr ("data-content", "\u25BC"); 

来源

2017-05-09 21:03:46 Ugo

动态更改CSS Unicode内容属性

回答

相关问题