CODEWITHSUNDEEP
javascripthtmlangularjs
Ashish Goyal
Ashish Goyal

Reputation: 19

How to disable button in AngularJS?

  $scope.date = moment(currentDate);

  $scope.date1 = moment(currentDate).add(-1, 'days');

  function checkDate(){
   if ($scope.date > $scope.date1) {
    return true;
        }
      else{
       return false;
         }
 };

  checkDate(); 




  <button ng-disabled="checkDate()" ng-click="myFunc()" style="margin-left:190px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br><b>5:00PM-8:00PM</b></button>



    $scope.myFunc = function() {
    $scope.showMe = !$scope.showMe;
    $scope.showtime($scope.timeslot);
  }

i want to disable the button but not hide. now i don't understand what is wrong in code button is not showing in disabled mode and the myFunc() is working now , when the button in disabled mode then no function or say nothing click on button

Upvotes: 0

Views: 110

Answers (2)

Deep
Deep

Reputation: 9804

Updating the answer based on the comment.

if you have 3 button like below with dates associated with those.

 <button ng-disabled="checkDate('2016-06-25')" ng-click="myFunc()" style="margin-left:190px; font-size:8.5px;     background-color: antiquewhite;
    border-color: white;"><strong>25/06/2016</strong> <br><b>5:00PM-8:00PM</b></button>

    <button ng-disabled="checkDate('2016-06-26')" ng-click="myFunc()" style="margin-left:190px; font-size:8.5px;     background-color: antiquewhite;
    border-color: white;"><strong>26/06/2016</strong> <br><b>5:00PM-8:00PM</b></button>

    <button ng-disabled="checkDate('2016-06-30')" ng-click="myFunc()" style="margin-left:190px; font-size:8.5px;     background-color: antiquewhite;
    border-color: white;"><strong>30/06/2016</strong> <br><b>5:00PM-8:00PM</b></button>

you need to declare the function like this in the controller.

var currentDate = new Date();

$scope.date1 = moment(currentDate).add(-1, 'days');

$scope.checkDate = function(buttonDate){


$scope.date = moment(new Date(buttonDate));  


if ($scope.date < $scope.date1) {

   return true;
}
else
{
   return false;
}
}

Check the working plunker here https://plnkr.co/edit/J85Rx0YjhNKj0gYqjhhF?p=preview

Hope this will help you.

Upvotes: 0

Navoneel Talukdar
Navoneel Talukdar

Reputation: 4608

checkDate()

must be associated with scope in order to work.

<button ng-disabled="checkDate()" ng-click="myFunc()" style="margin-left:190px; font-size:8.5px;     background-color: antiquewhite;
        border-color: white;"><strong>9:00Am-1:00PM</strong> <br><b>5:00PM-8:00PM</b></button>

And in controller you define checkDate

$scope.checkDate = function(){
   if ($scope.date > $scope.date1) {
         return true;
   }
   else{
         return false;
   }
 };

Also make sure moment(currentDate) and moment(currentDate).add(-1, 'days') must return javascript date object in order to make the comparison happen.

Upvotes: 2

Related Questions