Ionic+AngularJs Realization of Countdown Button for Obtaining Verification Code

The function of the button is: click "get verification code"-the button is unavailable-set the countdown-get it again after 60 seconds.

Main realization principle: set an $interval after clicking, change the remaining time every second, and display it on the page in real time by angle data binding. Set the $timeout and initialize the button to the available state after 60 seconds.

Implementation code:

(1)js code, which is set as the instruction of multiple calls.

angular.module('winwin ')。 Instruction ('timer button'),

Function ($ timeout,

$interval){

return

{

Restrictions:

AE '，

Scope:

{

Showing timer:

'=',

Timeout:

'='

},

Link:

Function (scope,

Elements,

Attribute) {

Range. Timer

=

Fake;

Range. Timeout

=

60000;

scope.timerCount

=

Range. Timeout

/

1000;

Scope. Text

=

"Get verification code";

scope.onClick

=

Function () {

scope.showTimer

=

True;

Range. Timer

=

True;

Scope. Text

=

"Retrieve after seconds";

defined variable

counter

=

$interval(function(){

scope.timerCount

=

scope.timerCount

-

1;

},

1000);

$timeout(function(){

Scope. Text

=

"Get verification code";

Range. Timer

=

Fake;

$interval.cancel (counter);

scope.showTimer

=

Fake;

scope.timerCount

=

Range. Timeout

/

1000;

},

scope . time out)；

}

},

Template:

& lt button

on-tap="onClick()"

class="button

Button.-Calm down

xgmm-btn "

ng-disabled = " timer " & gt； & lt span

ng-if = " show timer " & gt； {{

Timer count

} } & lt/span>。 { { text } } & lt/button & gt； '

};

});

(2)html code

& lt timer button

show-timer = " false " & gt； Get verification code

Realization effect:

(1) and click.

(2) After clicking

The above is the whole content of this article. I hope it will be helpful to everyone's study, and I hope everyone will support the script house more.