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

Question

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>

What is ngEnabled, is it custom directive of you mean ngDisabled? <button ng-disabled="disabled"></button> and $timeout(function() { $scope.disabled = false }, 5000). — dfsq
– dfsq, Commented Apr 1, 2016 at 14:31

Luka Jacobowitz · Accepted Answer · 2016-04-01 14:37:03Z

13

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).

edited Apr 1, 2016 at 14:37

answered Apr 1, 2016 at 14:30

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiee · Accepted Answer · 2016-04-01 14:39:25Z

7

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)
}

edited Apr 1, 2016 at 14:39

answered Apr 1, 2016 at 14:32

Kiee

10.8k8 gold badges35 silver badges56 bronze badges

2 Comments

Luka Jacobowitz Over a year ago

There is no ng-enabled, or am I missing something? Also it should be 5 seconds, not 3.

Kiee Over a year ago

I've not done angular for a while in favour of react, just realised, and was mid edit as you commented. :)

Mark Hughes · Accepted Answer · 2016-04-01 15:02:33Z

3

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"/>

edited Apr 1, 2016 at 15:02

answered Apr 1, 2016 at 14:32

Mark Hughes

7,4042 gold badges36 silver badges37 bronze badges

2 Comments

AdamCooper86 Over a year ago

I think it might be worth the correct vote because of all of the best practices in this answer, not something that is strictly necessary, but beneficial to someone new and starting out.

Mark Hughes Over a year ago

Thanks @AdamCooper86 - one of the problems I had starting out with Angular was the number of different ways there are to do things, the controller-as syntax and proper isolation of different elements was something that many examples missed but really helps to keep clean, testable, & bug-free code.

danday74 · Accepted Answer · 2016-04-01 14:33:44Z

1

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>

answered Apr 1, 2016 at 14:33

danday74

58.1k56 gold badges273 silver badges337 bronze badges

Comments

Valter Júnior · Accepted Answer · 2016-04-01 14:33:54Z

-1

Try this:

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

and:

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

answered Apr 1, 2016 at 14:33

Valter Júnior

9487 silver badges19 bronze badges

1 Comment

Kiee Over a year ago

This wouldn't work. You'd need to use $interval or $timeout or manually digest

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related