时间戳

首页 > 解决方案 > Angular 1.4：单击后禁用按钮

angularjs - Angular 1.4：单击后禁用按钮

问题描述

我有一种情况，我想在单击时禁用按钮几秒钟。这是按钮的代码：

<button uib-popover="Create TO" popover-trigger="mouseenter" data-ng-click="createTransportOrder(item.confirmed_price_id)" data-ng-disabled="item.transport_order_id || !item.confirmed_price_id" class="btn btn-info btn-xs">
                            <i class="fa fa-truck"></i>
                        </button>

这是createTransportOrder方法：

$scope.createTransportOrder = function (priceResponseId) {
            var priceResponseIds = [priceResponseId];
            PriceRequestsModel.createTransportOrdersByIds(priceResponseIds).then(
                function (response) {
                    $scope.messages = response.messages;
                    updateSelectedPriceRequests();
                    getPriceRequests();
                },
                function (response) {
                    $scope.messages = response.messages;
                }
            )
        };

我尝试了几件事，但徒劳无功。我怎样才能做到这一点？

标签： angularjs

解决方案

您可以setTimeout在末尾添加createTransportOrder 

 this.button.nativeElement.disabled = true;
    setTimeout(function(){
      this.button.nativeElement.disabled = false;
    },5000);

添加#mybutton到您的按钮<button (click)="yourclick()" #mybutton>Your button</button>

将变量添加@ViewChild('mybutton') button;到您的组件

Stackbliz 演示代码：https ://stackblitz.com/edit/angular-disable-5second

使用角度 1.4，您可以更改为

将 id 设置为您的按钮<button id="mybutton">

将这些代码添加到click函数下方。

document.getElementById('mybutton').disabled = true;
    setTimeout(function(){
      document.getElementById('mybutton').disabled = false;
    },5000);

推荐阅读