onmyway onmyway -4 years ago 168
HTML Question

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

How can I (using either

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

For example: If my
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
where I would like to display these:

<div class="mentionsMeta">
<span class="itemInfo">{{profileData.channels}}</span>

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download