如何使用AngularJS在按钮中有条件地显示HTML? [英] How can I conditionally display HTML in a button using AngularJS?

问题描述

我希望某个按钮元素默认情况下包含纯文本，但随后包含基于Angular作用域中某些变量的HTML.我的目标是使按钮说保存"，但随后变为禁用状态，并在单击时显示加载轮(同时等待来自长AJAX请求的响应).问题在于，Angular在按钮中显示了我的三元运算符的文字文本，而不是表达式的结果.

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.

这是我的按钮的外观:

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

当我将HTML更改为仅一些纯文本格式(例如正在加载...")时，它就可以正常工作.

When I change the HTML to just some plain text (for instance, "Loading..."), then it works fine.

如何显示表达式的 result 而不是表达式本身的文本?谢谢.

How can I get it to display the result of the expression rather than the text of the expression itself? Thanks.

旁注:我试图启动并运行演示，但是它似乎我不知道如何使用JSFiddle正确连接Angular.这不是我提出问题的目的，但是我真的很想知道我要去哪里错，以便将来我可以成功地制作简单的Angular演示.任何建议表示赞赏.

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.

推荐答案

查看此小提琴

<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添加了三元运算符支持，以及您的摆弄旧版本，这就是为什么它不起作用

note:Angular 1.1.5 added a ternary operator support, and your fiddle pointing to older version, that's why its not working

这篇关于如何使用AngularJS在按钮中有条件地显示HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！