Daniel Williams Daniel Williams - 4 months ago 14
AngularJS Question

Dealing with quotes inside an Angular instruction

I have this code that changes the text of the button:

<button type="button" class="btn btn-default" ng-click="saveActiveFile()" ng-disabled="activeFile.saving">{{ activeFile.saving ? "Saving" : "Save" }}</button>


Instead of it changing to
Saving
I want it to be a FA icon:

<i class="fa fa-spinner fa-spin fa-fw"></i>


But because the code has quotes in it I'm not sure how to make it work.

Answer

You are saying you want the text to be an icon instead? Assuming you can have html inside the button tags, you can use ng-if to add/remove DOM based on some condition.

<button type="button" class="btn btn-default" ng-click="saveActiveFile()" ng-disabled="activeFile.saving">
    <span ng-if="!activeFile.saving">Save</span>
    <i ng-if="activeFile.saving" class="fa fa-spinner fa-spin fa-fw"></i>
</button>