我希望某个按钮元素默认包含纯文本,但随后包含基于我的 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 演示。如有任何建议,我们将不胜感激。
最佳答案
看看这个 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支持,而你的 fiddle 指向旧版本,这就是它不起作用的原因
关于javascript - 如何使用 AngularJS 有条件地在按钮中显示 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37352301/