CODEWITHSUNDEEP
angularjs
Saidi Meriem
Saidi Meriem

Reputation: 41

How to enable or disable a button based on a value in angularjs?

How to enable or disable a button according to a select value? I want a button to be disabled but once a select value is changed to a certain vaue "xxxx" the button is enabled.

Upvotes: 3

Views: 21399

Answers (5)

Adwaenyth
Adwaenyth

Reputation: 2110

Use the ng-disabled directive like this:

<div class="form-group">
    <label class="control-label"> Etat</label>
    <select class="form-control" name="singleSelect"  ng-model="demande.etat">
        <option value="etude">etude</option>
        <option value="Accepte">Accepte</option>
        <option value="Refus">Refus</option>
    </select><br>
</div>

and in the button markup use something like this:

<button ng-disabled="demande.etat != 'Accepte'">
    ....
</button>

Upvotes: 5

sagar chopada
sagar chopada

Reputation: 332

check this... if you want chage then comment..

angular.module("myApp",[]).
controller("myController",function($scope){
$scope.buttonShow=false;
  $scope.checkVal=function(){
    if($scope.demande.etat == "Accepte"){
      $scope.buttonShow=true;
    }else{
      $scope.buttonShow=false;    
    }
  }
});
<html ng-app="myApp" >
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 </head>
  <body ng-controller="myController">
<div class="form-group" >
 <label class="control-label"> Etat</label>
<select ng-change="checkVal()" class="form-control" name="singleSelect"  ng-model="demande.etat">
<option value="etude">etude</option>
<option value="Accepte">Accepte</option>
<option value="Refus">Refus</option>
</select><br>
  
  <button ng-show="buttonShow" class="btn btn-success btn-sm" ng-click="genererContrat(d)" title="Contrat"  data-toggle="modal" data-target="#myModalHorizontalContrat"  ><span class="glyphicon glyphicon-eye-open" ></span><span class="hidden-xs hidden-sm" ></span>Button</button>
</div>
    </body>
  </html>

Upvotes: 0

Vijay Kumar
Vijay Kumar

Reputation: 69

<button class="btn btn-success btn-sm" ng-click="genererContrat(d)" title="Contrat"  data-toggle="modal" data-target="#myModalHorizontalContrat" ng-disabled="{demande.etat == Accepte}" ><span class="glyphicon glyphicon-eye-open" ></span><span class="hidden-xs hidden-sm" ></span></button>

Upvotes: 0

ojus kulkarni
ojus kulkarni

Reputation: 1907

You can use ng-if also for conditions

$scope.MyButton = true;

<button ng-if="MyButton === false">
  ....
</button>

Upvotes: -1

Vijay Kumar
Vijay Kumar

Reputation: 69

Use ngDisabled for more details visit: https://docs.angularjs.org/api/ng/directive/ngDisabled

Use the model value of the select box to enable or disable

OR

Post you code so that can be improvised

Upvotes: 1

Related Questions