Bootstrap按钮使用Angularjs加载文本 [英] Bootstrap button loading text with Angularjs

问题描述

在使用引导程序和jquery的非角度应用程序中，我可以创建如下按钮:

In a non-angular application that uses bootstrap and jquery, I can create buttons like this:

<button id="saveButton" data-loading-text="Please wait...">Save</button>

然后，当单击按钮时，我可以将其设置为如下所示的加载状态:

Then, when the button is clicked, I can set it to it's loading state like this:

$('#saveButton').button('loading');

单击此按钮还会触发ajax请求，在该请求的回调中，我可以像这样重置按钮:

Clicking this button also fires an ajax request, and in the callback for that request, I can reset the button like this:

$('#saveButton').button('reset');

如何在角度应用程序中实现相同的行为?该应用程序还包括Jquery和Bootstrap.

How can I accomplish this same behavior within an angular application? The application also includes Jquery and Bootstrap.

推荐答案

在您的angularjs应用程序中， 在您的视图内:

In your angularjs application, inside your view:

<div>
    <button type="submit" class="btn btn-primary" ng-click="search()">{{ searchButtonText }}
    </button>
</div>

在控制器中:

$scope.searchButtonText = "Search";

$scope.search = function() {
     $scope.searchButtonText = "Searching";
    // Do your searching here
}

这是小提琴 希望这就是您要实现的.

Here is the fiddle Hope this is what you want to implement.

这篇关于Bootstrap按钮使用Angularjs加载文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！