Rijo Rijo - 20 days ago 9
AngularJS Question

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

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

Answer

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

Comments