動態更改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內容屬性

回答

相關問題