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

Question

我希望某个按钮元素默认包含纯文本，但是根据我的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更改为一些纯文本（例如，“正在加载...”）时，它可以正常工作。

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

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

Answer 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支持，而你的小提琴指向旧版本，这就是为什么它无法正常工作

Answer 2

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

Answer 3

我建议google关于以下3件事情，以任何方式满足您的需求。你很容易找到它

• NG-如果
• ng-show
• 纳克隐藏

ng-hide＆amp; ng-show只会通过切换css显示属性来播放，而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>

Answer 4

“Angular way”将由此

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

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

Answer 5

我认为您正在努力实现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

Answer 6

试试这个：

https://plnkr.co/edit/rguvZ2Xs4lwl4QhA9Cv0

frank = Walrus.create!
frank.bubbles.create!
frank.destroy
# Destroys both the walrus and bubble records
Walrus.unscoped do
  frank = Walrus.first
  # => <Walrus...
  frank.bubbles
  # => []
end

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