Based on the time counter how can I enable and disable button using angularjs

Question

I want to enable a button when the time counter is Zero. Here I have two time counter 'First game starts in one time and another game starts in another time'. When the first button should be enable when the first time counter is zero, like that second one. Can anyone help me

My html code given below

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="timer2.js"></script>

    <div class='wrap' ng-app='app' ng-controller="myCtrl">
        <div class='time-to'>
        First Game Starts in...  <span countdown='10' date={{date1}} >&nbsp;</span><button ng-click="clickMe()" ng-show="showMe" >Play Now</button><br>
        Second Game Starts in... <span countdown='10' date={{date2}}>&nbsp;</span><button ng-click="clickMe()" ng-show="showMe" >Play Now</button>
        </div>
    </div>

Angularjs code timer2.js code given below

var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
    $scope.date1='16 November 2016 17:35:00';
    $scope.date2='17 November 2016 18:10:00';

});
    app.directive('countdown', [
        'Util',
        '$interval',
        function (Util, $interval) {
            return {
                restrict: 'AE',
                scope: { date: '@' },
                link: function (scope, element) {
                    var future;

                    future = new Date(scope.date);

                    element.showMe1 = true;
                    $interval(function () {
                        var diff;
                        diff = Math.floor((future.getTime() - new Date().getTime()) / 1000);
                        console.log(diff);
                        return element.text(Util.dhms(diff));
                    }, 1000);
                }
            };
        }
    ]).factory('Util', [function () {
            return {
                dhms: function (t) {
                    var days, hours, minutes, seconds;
                    days = Math.floor(t / 86400);
                    t -= days * 86400;
                    hours = Math.floor(t / 3600) % 24;
                    t -= hours * 3600;
                    minutes = Math.floor(t / 60) % 60;
                    t -= minutes * 60;
                    seconds = t % 60;
                    return [
                        days + 'd',
                        hours + 'h',
                        minutes + 'm',
                        seconds + 's'
                    ].join(' : ');
                }
            };
        }]);

I'm new in angularjs kindly please help me. If same solution exist in please give me the link. Thanks for all

I want to enable a button when the current time equal to mentioned time. Here I can get the difference value from "var diff" — Rijo
– Rijo, Commented Nov 16, 2016 at 9:40
No just I compare the current time and mentioned time is equal to same. If time equal i want to enable respective button — Rijo
– Rijo, Commented Nov 16, 2016 at 9:43

Sravan · Accepted Answer · 2016-11-16 09:57:03Z

1

You can use two-way binding to and fro from directive and controller to achieve this.

Take a scope variables in your controller named disabled1 and disabled2 and make a two-way binding from the directive to te controller.

var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
    $scope.disabled1 = true;
    $scope.disabled2 = true;
    $scope.date1='16 November 2016 17:35:00';
    $scope.date2='17 November 2016 18:10:00';

});

Directive:

app.directive('countdown', [
        'Util',
        '$interval',
        function (Util, $interval) {
            return {
                restrict: 'AE',
                scope: { 
                    date: '@',
                    disabled: '='
                 },
                link: function (scope, element) {
                    var future;

                    future = new Date(scope.date);

                    element.showMe1 = true;
                    $interval(function () {
                        var diff;
                        diff = Math.floor((future.getTime() - new Date().getTime()) / 1000);
                        console.log(diff);
                        if(diff == 0)
                        {
                            scope.disabled = false;
                        }
                        return element.text(Util.dhms(diff));
                    }, 1000);
                }
            };
        }
    ])

Check the scope,

scope: { 
         date: '@',
         disabled: '='
      }

View:

<div class='wrap' ng-app='app' ng-controller="myCtrl">
    <div class='time-to'>
    First Game Starts in...  <span countdown='10' date={{date1}} disabled="disabled1">&nbsp;</span><button ng-click="clickMe()" ng-show="showMe" ng-disabled="disabled1">Play Now</button><br>
    Second Game Starts in... <span countdown='10' date={{date2}} disabled="disabled2" >&nbsp;</span><button ng-click="clickMe()" ng-show="showMe" ng-disabled="disabled2">Play Now</button>
    </div>
</div>

In the view I am sending the disabled value through the attribute directive and using it in the directive.

If that value changes in the directive, it is reflected back to the view.

Using that technique, I used ng-disabled = "disabled1" and ng-disabled = "disabled2" for respective buttons.

a reference for 2-way binding

edited Nov 16, 2016 at 9:57

answered Nov 16, 2016 at 9:49

Sravan

18.7k3 gold badges34 silver badges54 bronze badges

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

5 Comments

Sravan Over a year ago

@Rijo, checked my answer?

Rijo Over a year ago

Is it possible to assign the date value to the text field?

Sravan Over a year ago

use a date picker on the text field, and convert to your format from your controller.

Rijo Over a year ago

@sarvan how can redirect when if(diff< 0)

Rijo Over a year ago

I added this code but its not working if(diff<0) { $window.location.href = '/home.html'; }

Collectives™ on Stack Overflow

Based on the time counter how can I enable and disable button using angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related