CODEWITHSUNDEEP
javascripthtmlangularjs
Jacob Stamm
Jacob Stamm

Reputation: 1873

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

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>

Broken Angular code in 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.

Upvotes: 0

Views: 6401

Answers (7)

Christian Hill
Christian Hill

Reputation: 378

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.

Upvotes: 1

Dhaval
Dhaval

Reputation: 389

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

Upvotes: 3

C14L
C14L

Reputation: 12558

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

Upvotes: 1

samir benzenine
samir benzenine

Reputation: 478

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>

Upvotes: 1

Yuva Raj
Yuva Raj

Reputation: 3881

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

Upvotes: 1

Kgn-web
Kgn-web

Reputation: 7565

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>

Upvotes: 1

Pawan B
Pawan B

Reputation: 4623

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>

Upvotes: 0

Related Questions