Thomas Juranek Thomas Juranek - 3 months ago 9
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.

Answer

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.

Comments