如何使用 AngularJS 有条件地在按钮中显示 HTML？答案

【问题标题】：How can I conditionally display HTML in a button using AngularJS?如何使用 AngularJS 有条件地在按钮中显示 HTML？
【发布时间】：2016-09-18 01:12:23
【问题描述】：

我希望某个按钮元素默认包含纯文本，然后包含基于我的 Angular 范围内的某个变量的 HTML。我的目标是让按钮说“保存”，但随后被禁用并在单击时显示一个加载轮（同时等待来自长 AJAX 请求的响应）。问题是，Angular 在按钮中显示了我的三元运算符的文字文本，而不是表达式的结果。

这是我的按钮的样子：

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

当我将 HTML 更改为纯文本（例如，“正在加载...”）时，它可以正常工作。

我怎样才能让它显示表达式的 result 而不是表达式本身的文本？谢谢。

旁注：I tried to get a demo up and running，但我似乎无法弄清楚如何使用 JSFiddle 正确连接 Angular。这不是我的问题的目的，但我真的很想知道我哪里出错了，这样我将来就可以成功地制作简单的 Angular 演示。任何建议表示赞赏。

【问题讨论】：

如果您想在从 $http 加载的同时旋转，请查看 ngmodules.org/modules/ng-busy 这使用了承诺模式。它还将禁用子元素的位。

标签： javascript html angularjs

【解决方案1】：

看看这个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);
  };
});

注意：Angular 1.1.5 添加了ternary operator 支持，并且您的小提琴指向旧版本，这就是它不起作用的原因

【讨论】：

太棒了——谢谢！附带问题——知道为什么我的 OnClick 事件中的setTimeout 不起作用吗？不是必需品，只是好奇。
看看这个link

【解决方案2】：

我会向谷歌建议以下 3 件事，它们将以任何方式满足您的需求。你会很容易找到它

ng-如果
ng-show
ng-隐藏

ng-hide & ng-show 只会通过切换 css display 属性来播放，而 ng-if 只会在所需条件等于 true 的情况下添加 html。

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

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

【讨论】：

【解决方案3】：

我认为你正在努力实现this

所有代码都在该链接中。贴出重要部分代码

<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

【讨论】：

【解决方案4】：

试试这个：

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>

【讨论】：

【解决方案5】：

“角度方式”就是这样

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

但您需要在 jsfiddle 中实际加载 Angular.js，即<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>

工作Plunker：http://plnkr.co/edit/ELYDsfIsbeo7sSvub6Nx?p=preview

【讨论】：

您还可以使用 JavaScript 选项菜单上的“框架和扩展”下拉菜单选择 AngularJS。
完美，谢谢，我想这正是我想要的。但是，如果您不介意帮助我解决这个问题，我仍然无法让我的演示正确加载 Angular。我已经在 JSFiddle 中选择了 Angular 作为@JackA。建议，我也手动将它添加到小提琴中。为什么它仍然无法正常工作？ jsfiddle.net/7uyuvpyf/4
@JacobStamm 在 JSFiddle 中使用 Angular 的另一个技巧是，您必须将 JavaScript 选项中的“加载类型”从默认的“onLoad”更改为“No wrap...”之一选项。

【解决方案6】：

使用 ng-show 或 ng-hide 元素将您的 i 元素包装在一个 div 中，然后将您的表达式应用于这两个指令中的任何一个的值。

【讨论】：

【解决方案7】：

检查此jsfiddle，它是您所要求的工作示例

更新一点代码：

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

【讨论】：