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

时间:2016-04-25 09:12:50

标签: 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.

5 个答案:

答案 0 :(得分:5)

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>

答案 1 :(得分:1)

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

答案 2 :(得分:0)

<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>

答案 3 :(得分:0)

检查一下...... 如果你想要chage然后评论..

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>

答案 4 :(得分:-1)

You can use ng-if also for conditions

$scope.MyButton = true;

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