Modification dynamique de la propriété de contenu CSS Unicode

Je configure un arrière-plan dans une balise div qui est une icône géniale dans chaque ligne d'une table. Cette icône dépend de l'objet affiché. J'ai essayé de mettre en place le code similaire à Changing CSS content property dynamically. Cependant, mon contenu de données serait unicode. J'assigne les valeurs dans un contrôleur angulaire comme suit:Modification dynamique de la propriété de contenu 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; 
}

puis de les inclure dans le tableau comme suit:

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

Cependant, ce qui met tout 0A6, 0ad et 005 en arrière-plan 'image'. Existe-t-il un moyen d'ajouter du contenu Unicode dynamiquement ou est-ce que attr (data-xxx) est juste pour du texte brut?

En outre, j'ai essayé d'ajouter un attr (data-color) pour la couleur, mais cela ne semble pas fonctionner non plus. Est-ce aussi parce que j'utilise du code hexadécimal plutôt que du texte brut?

Source

2017-04-24 ChristyPiffat

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

Les méthodes décrites fonctionnent, mais pas pour AngularJS. Le problème avec eux est que vous avez besoin de coder en dur les valeurs dans l'attribut de contenu de données dans le HTML. J'ai besoin de quelque chose de dynamique en utilisant Angular. Après quelques recherches, j'aurais besoin d'une sorte d'attribut ng-xxx à ajouter à la page. Il y a un ng-attr-xxx que vous pouvez utiliser, mais je n'ai pas réussi à le faire fonctionner. Il y a aussi un style ng, mais il faudrait construire le style quelque part, ce qui permettrait de mélanger les styles dans le contrôleur plus que je ne le voudrais. – ChristyPiffat

^{Si je suis votre question ...}
essayer préfixant &#x référence

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

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

références commencent par &# et se terminent par ; et x signifie que ce qui est utilisé est une valeur hexadécimale.

Source

2017-04-24 22:18:07

Cela fonctionne si je suis en mesure de coder en dur le code HTML. Cependant, je cours ceci dans une ng-repeat avec le contenu dépendant du dataItem.type pour cet enregistrement. Pour Angular, il semble que vous ne pouvez utiliser ng-xxx que pour obtenir des attributs dynamiques. – ChristyPiffat

Cela a fonctionné pour moi: https://stackoverflow.com/a/26025865/2077405

Insérer dans ce format, en utilisant le \ u que, en Javascript, désigne un numéro Unicode dans une chaîne littérale
$("a").attr ("data-content", "\u25BC"); 

Source

2017-05-09 21:03:46 Ugo

Modification dynamique de la propriété de contenu CSS Unicode

Répondre

Questions connexes