Thomas Juranek Thomas Juranek - 2 months ago 4x
AngularJS Question

How to use ngClass with Scope and Ionicons

I am building a website using AngularJS to show form data in a live preview. This preview includes ionicons, and I am attempting to use ng-class to dynamically change the icon from the default value depending on what the user inputs.

<!-- Call Icon Input Field -->
<input type="text" class="form-control" ng-model="$parent.callIcon">

// Call Icon Default Value
$scope.callIcon = "ion-ios-telephone";

<!-- Call Icon in Previewer -->
<span ng-class="'previewerCardButtonIcons icon {{$parent.callIcon}}'"></span> Give a Call

Right now, the icon shows up in the previewer, but when I change the icon in the form, nothing happens. I know that the scope variable is changing when the form input is changed, but it doesn't change the previewer at all. Any help would be great.


Don't need to have {{}}(interpolation) in ng-class directive. It be alone with ng-class.

<span class="previewerCardButtonIcons icon" ng-class="$parent.callIcon"></span> Give a Call

Though I wouldn't encourage you to use $parent annotation in your application anywhere, Instead I'd say use Dot Rule OR controllerAs pattern while declaring controller & use its alias to make view binding.