CODEWITHSUNDEEP
javascriptangularjs
Rich Ashworth
Rich Ashworth

Reputation: 2015

How do I enable a button after a delay using AngularJS?

I am using the ng-disabled directive to control when a button on my page can be clicked. Is it possible to control this via a timer? I would like the button to be disbaled until 5 seconds have elapsed. My HTML is currently:

<div ng-controller="ResetController">
    <button ng-click="reset()">Reset</button>
</div>

Upvotes: 3

Views: 11496

Answers (5)

Mark Hughes
Mark Hughes

Reputation: 7374

You need to set a variable in your controller, then set ng-disabled using that variable.

For example, assuming a controller ExampleController registered with controller-as "example":

(function() {
    'use strict';
    angular.module('app').controller('ExampleController',ExampleController);
    ExampleController.$inject = ['$timeout'];

    function ExampleController($timeout) {
        var vm = this;
        vm.buttonDisabled = true;
        $timeout(function() { 
            vm.buttonDisabled = false;
        }, 5000);
    }
})();

Then in your template:

<input type="button" ng-disabled="example.buttonDisabled"/>

Upvotes: 3

Kiee
Kiee

Reputation: 10771

ng-enabled isn't in core, but ng-disabled evaluates based on either true or false so simply use a timeout to assign true to a variable after a desired amount of time to enable accordingly.

html:

<button ng-disabled="isDisabled">click me after 3 seconds</button>

controller:

function($scope, $timeout) {
  $scope.isDisabled= true;
  $timeout(function(){
    $scope.isDisabled= false;
  }, 3000)
}

Upvotes: 7

Luka Jacobowitz
Luka Jacobowitz

Reputation: 23532

You can use $timeout:

$timeout(function() {
   $scope.buttonEnabled = true;
}, 5000);

And in your html:

<button ng-click="reset()" ng-disabled="!buttonEnabled">Reset</button>

Also don't forget to inject $timeout into your controller. Like any other angular Service ($http for example).

Upvotes: 13

Valter J&#250;nior
Valter J&#250;nior

Reputation: 948

Try this:

var interval= setInterval(timePassed, 1000);
function timePassed() {
   $scope.buttonEnabled = true;
}

and:

<input type="button" ng-enabled="buttonEnabled"/>

Upvotes: -1

danday74
danday74

Reputation: 57126

you need to use timeout as per the previous answer ...

$scope.buttonDisabled = true;

$timeout(function() {
   $scope.buttonDisabled = false;
}, 5000);

don't forget to inject $timeout into your controller / service.

then in your HTML do ...

<div ng-controller="ResetController">
    <button ng-click="reset()" ng-disabled="buttonDisabled">Reset</button>
</div>

Upvotes: 1

Related Questions