How can I conditionally display HTML in a button using AngularJS?

Question

I would like for a certain button element to contain plain text by default, but then contain HTML based on some variable in my Angular scope. My goal is to have the button say "Save", but then become disabled and display a loading wheel when clicked (while awaiting a response from a long AJAX request). The problem is, Angular is displaying the literal text of my ternary operator in the button rather than the result of the expression.

Here's what my button looks like:

<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
  {{ IsLoading === false ? "Save" : "<i class='fa fa-spinner fa-pulse'></i>" }}
</button>

When I change the HTML to just some plain text (for instance, "Loading..."), then it works fine.

How can I get it to display the result of the expression rather than the text of the expression itself? Thanks.

Side note: I tried to get a demo up and running, but it seems that I can't figure out how to wire up the Angular properly using JSFiddle. This is not the purpose of my question, but I'd really like to know where I'm going wrong so I can successfully make simple Angular demos in the future. Any advice is appreciated.

If your wanting to spin whilst loading from a $http then have a look at ngmodules.org/modules/ng-busy this uses the promise pattern. It will also disable the bits that child elements. — Steve Drake
– Steve Drake, Commented May 20, 2016 at 17:35

Dhaval · Accepted Answer · 2016-05-21 12:38:35Z

3

Check out this fiddle

<div ng-app="myApp" ng-controller="LoadingController">
  <div style="float: left;">
    <button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
      <span ng-if="!IsLoading">
        Save
      </span>
      <span ng-if="IsLoading">
        <i class="fa fa-spinner fa-pulse"></i>
      </span>

    </button>
  </div>
  <div style="float: left;">
    <button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
     <span ng-if="!IsLoading">
        Save
      </span>
      <span ng-if="IsLoading">
        Loading...
      </span>
    </button> 
  </div>
</div>

js

angular.module("myApp",[]).controller('LoadingController', function   LoadingController ($scope) {
    $scope.IsLoading = false;

  $scope.OnClick = function() {
    $scope.IsLoading = true;
    window.setTimeout(function() {
        $scope.IsLoading = false;
    }, 1000);
  };
});

note:Angular 1.1.5 added a ternary operator support, and your fiddle pointing to older version, that's why its not working

edited May 21, 2016 at 12:38

answered May 20, 2016 at 18:00

Dhaval

3891 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jacob Stamm Over a year ago

Brilliant -- thanks! Side question -- any idea why the setTimeout in my OnClick event isn't working? Not essential, just curious.

Dhaval Over a year ago

check this out link

Kgn-web · Accepted Answer · 2016-05-20 17:37:08Z

1

I will suggest to google about the following 3 things which will serve your needs in any way. You will easily find it

ng-if
ng-show
ng-hide

ng-hide & ng-show will just play around by switching the css display property while ng-if will only add the html in case required condition equals to true.

<input type="checkbox" ng-model="flag" ng-init="flag= true">

<div ng-if="flag">
<h1>Welcome</h1>
<p>Hello mate.</p>
</div>

answered May 20, 2016 at 17:37

Kgn-web

7,64531 gold badges108 silver badges176 bronze badges

Comments

Yuva Raj · Accepted Answer · 2016-05-20 17:56:03Z

1

I think you are trying to achieve this

All codes are in that link. Posted important part code

<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
        <span ng-hide="IsLoading">Save</span>
        <span ng-show="IsLoading"><i class='fa fa-spinner fa-pulse'></i </span>
</button>

WORKING DEMO

answered May 20, 2016 at 17:56

Yuva Raj

3,8811 gold badge21 silver badges30 bronze badges

Comments

samir benzenine · Accepted Answer · 2016-05-20 17:58:33Z

Try this:

https://plnkr.co/edit/rguvZ2Xs4lwl4QhA9Cv0

<script>
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.isLoading = false;

  $scope.click = function() {
    $scope.isLoading = true;
    $timeout(function() {
      $scope.isLoading = false;
    }, 2000);
  }
});

</script>

  <style>
    .loadingButton.loading span {
      display: none;
    }

    .loadingButton.loading i {
      display: block;
    }    

    .loadingButton i {
      display: none;
    }
  </style>

  <button type="submit" ng-disabled="isLoading" ng-click="click()" class="loadingButton" ng-class="{'loading': isLoading}">
    <span>Save</span>
    <i class='fa fa-spinner fa-pulse'>icon</i>
  </button>

C14L · Accepted Answer · 2016-05-20 18:02:07Z

1

The "Angular way" would by this

<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
  <span ng-hide="IsLoading">Save</span>
  <i ng-show="IsLoading" class='fa fa-spinner fa-pulse'></i>
</button>

But you need to actually load Angular.js in your jsfiddle, i.e. <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>

Working Plunker: http://plnkr.co/edit/ELYDsfIsbeo7sSvub6Nx?p=preview

edited May 20, 2016 at 18:02

answered May 20, 2016 at 17:40

C14L

12.6k4 gold badges43 silver badges53 bronze badges

3 Comments

Jack A. Over a year ago

You can also select AngularJS using the "Framework & Extensions" drop-down on the JavaScript options menu.

Jacob Stamm Over a year ago

Perfect, thanks, I think that's exactly what I'm looking for. However, I still can't get my demo to load Angular properly, if you wouldn't mind helping me figure that out. I already had Angular selected in JSFiddle as @JackA. suggested, and I also manually added it to the fiddle. Any reason why it still wouldn't be working? jsfiddle.net/7uyuvpyf/4

Jack A. Over a year ago

@JacobStamm The other trick to using Angular in JSFiddle is that you must change the "Load Type" in the JavaScript options from the default of "onLoad" to one of the "No wrap..." options.

Christian Hill · Accepted Answer · 2016-05-23 00:06:11Z

1

Wrap your i element in an div with the ng-show or ng-hide element and then apply your expression to the value of either of those two directives.

edited May 23, 2016 at 0:06

answered May 20, 2016 at 17:29

Christian Hill

3781 gold badge3 silver badges17 bronze badges

Comments

Pawan B · Accepted Answer · 2016-05-20 17:30:40Z

0

Check this jsfiddle , Its a working example of what you are asking for

Updating a little code :

<div ng-app ng-controller="Controller">
  <div style="float: left;">
    <button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
      {{ IsLoading === false ? "Save" : "<i class='fa fa-spinner fa-pulse'></i>" }}
    </button>
  </div>
  <div style="float: left;">
    <button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
      {{ IsLoading === false ? "Save" : "Loading..." }}
    </button> 
  </div>
</div>

answered May 20, 2016 at 17:30

Pawan B

4,6332 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

How can I conditionally display HTML in a button using AngularJS?

7 Answers 7

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related