Thomas Juranek Thomas Juranek - 1 year ago 68
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 Source

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.

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