bkcollection bkcollection - 2 years ago 131
HTML Question

Add text beside ionicons

How to add text beside the ionicons. I only see the ionicons but the text is unable to show.Iwant to show 'More' and 'Less' with the ionicons when user click on it.

Example, preset condition is ion-plus sign and 'More'. Click 'More', it will show ion-minus and 'Less'. Function wise is working. Only 'more and 'less' not shown.

Below is my code

<div ng-click="toggleon()" <i class="icon" ng-class="showMore ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><i class="padding" ng-class="showMore ? 'Less' : 'More'"></i></div>

Answer Source

ng-class is used to apply a CSS class to an element. It cannot be used to apply text. Use ng-bind instead. Also use <span> and not <i> for texts.

<div ng-click="toggleon()"> <i class="icon" ng-class="showMore ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><span class="padding" ng-bind="showMore ? 'Less' : 'More'"></span></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download