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

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

下面是我的按钮的外观：

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

{{IsLoading==false？“保存”：“}

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

如何让它显示表达式的结果而不是表达式本身的文本？谢谢

---

旁注：，但我似乎不知道如何使用JSFIDLE正确连接角度。这不是我问题的目的，但我真的很想知道我错在哪里，这样我就可以在将来成功地进行简单的角度演示。任何建议都将不胜感激。

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

检查此项，这是您所要求的工作示例

更新一点代码：

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

{{IsLoading==false？“保存”：“}
{{IsLoading==false？“保存”：“正在加载…”}

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

• ng如果
• 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>

欢迎
你好，伙计

这样“角度方式”就可以了

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

拯救

但是您需要在JSFIDLE中实际加载Angular.js，即

---

工作普朗克：

我认为你正在努力实现目标

所有代码都在该链接中。张贴重要部件代码

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

拯救
试试这个：



var app=angular.module（'plunker'，[]）；
app.controller（'MainCtrl'，函数（$scope，$timeout）{
$scope.isLoading=false；
$scope.click=function（）{
$scope.isLoading=true；
$timeout（函数（）{
$scope.isLoading=false；
}, 2000);
}
});
.loadingButton.loading跨度{
显示：无；
}
.加载按钮{
显示：块；
}    
.加载按钮i{
显示：无；
}
拯救
偶像
看看这个

注意：Angular 1.1.5添加了一个支持，并且您的小提琴指向旧版本，这就是为什么它不工作的原因
如果您想在从$http加载时旋转，请查看此使用promise模式。它还将禁用子元素的位。您还可以使用JavaScript选项菜单上的“框架和扩展”下拉菜单选择AngularJS。非常好，谢谢，我想这正是我想要的。然而，如果你不介意帮我弄清楚的话，我仍然无法让我的演示正确加载Angular。我已经在JSFIDLE中选择了@JackA。建议，我还手动将其添加到小提琴中。有什么理由它仍然不起作用吗@JacobStamm在JSFIDLE中使用Angular的另一个技巧是，您必须将JavaScript选项中的“加载类型”从默认的“onLoad”更改为“No wrap…”选项之一。太棒了，谢谢！附带问题——知道为什么OnClick事件中的
setTimeout
不起作用吗？不重要，只是好奇。看看这个
<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>

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

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

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