javascript - How can I conditionally display HTML in a button using AngularJS? - Stack Overflow

admin管理员组

文章数量:1316393

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 bee 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.

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 bee 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.

• javascript
• html
• angularjs

Share Improve this question Follow asked May 20, 2016 at 17:14 Jacob StammJacob Stamm 1,87333 gold badges3636 silver badges5757 bronze badges 1

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

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 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

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>Wele</h1>
<p>Hello mate.</p>
</div>

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

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>

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./ajax/libs/angular.js/1.5.5/angular.js"></script>

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

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.

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>

本文标签： javascriptHow can I conditionally display HTML in a button using AngularJSStack Overflow