onmyway onmyway - 29 days ago 11
HTML Question

Swap Text in AngularJs data binding for Font Awesome font when text match (Social Media Fonts)

How can I (using either

AngularJs
or
HTML
), swap my returned text for a
Font Awesome font
when the text matches a certain string?

For example: If my
{{profileData.channels}}
returns the following string:
Twitter, YouTube and Facebook - how can I substitute these for the Font Awesome fonts;
fa fa-twitter-square
;
fa fa-youtube-square
;
fa fa-facebook-square


Below is my
<div>
where I would like to display these:

<div class="mentionsMeta">
<div>
<h2>Channels></i></h2>
<hr>
<span class="itemInfo">{{profileData.channels}}</span>
</div>
</div>

Answer

I think you are looking at a logic like this.

<span class="itemInfo {{ profileData.channels === 'Twitter' ? 'fa fa-twitter-square' : '' }}">{{profileData.channels === 'Twitter' ? '' : profileData.channels}}</span>

Of course you can make this much better, for example you can change your profileData array of string with an array of objects where you set the corresponding class, so that you will have something like

<span ng-if="profileData.isSpecial" class="itemInfo {{profileData.channels}}"></span>
<span ng-if="!profileData.isSpecial" class="itemInfo">{{profileData.channels}}</span>