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.
-
3Very simple: ngModel + ngDisabled directives. Check documentation.dfsq– dfsq2016-04-25 09:14:37 +00:00Commented Apr 25, 2016 at 9:14
Add a comment
|
5 Answers
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>
10 Comments
Saidi Meriem
my angularjs doesn't recognize the ng-disabled.
Adwaenyth
@SaidiMeriem Which version of angular are you using? Btw. does the app not recognize the directive or does it not bind to your data? Please inlcude your controller & html sources in your original post so that we can see where the problem might be.
Saidi Meriem
I'm using AngularJS v1.4.7 and yes the app is not recognizing the directive
Adwaenyth
I've edited my hint to reflect what you have in your document. 1.4.7 should work with
ng-disabled. So the question is, is it managed by the same app/controller? You can try to simply write true and false in the ng-disabled directive to check if the app is actually recognizing the directive there.Saidi Meriem
the ng-disabled is working, but not the propriate way, it is disabled even when demande.etat = 'Accepte'
|
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
Comments
<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>
Comments
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>
Comments
You can use ng-if also for conditions
$scope.MyButton = true;
<button ng-if="MyButton === false">
....
</button>
3 Comments
Adam Nierzad
This will stop the button from being rendered at all.
ojus kulkarni
@anierzad if you use
ng-if at proper place it will show proper data for proper conditionAdam Nierzad
But it doesn't answer the question asked by the original poster.