如何启用或禁用基于angularjs中的值的按钮？

如何根据选择值启用或禁用按钮？我想要一个按钮被禁用，但是一旦选择值被更改为某个值“xxxx”，该按钮被启用。如何启用或禁用基于angularjs中的值的按钮？

2016-04-25 Saidi Meriem

你试过了什么？ – silentprogrammer

非常简单：ngModel + ngDisabled指令。检查文档。 – dfsq

使用ng-disableddirective这样的：

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

，并在按钮标记使用这样的事情：

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

来源

2016-04-25 09:16:49 Adwaenyth

我的angularjs无法识别ng-disabled。 –

@SaidiMeriem你正在使用哪个版本的角？顺便说一句。该应用程序不能识别该指令或不会绑定到您的数据？请在您的原始文章中包含您的控制器和html源代码，以便我们可以看到问题的出现位置。 – Adwaenyth

我正在使用AngularJS v1.4.7，是的应用程序不认识指令 –

使用ngDisabled更多详情请访问： https://docs.angularjs.org/api/ng/directive/ngDisabled

使用启用或禁用选择框的模型值

后您的代码，以便可以即兴

来源

2016-04-25 09:17:25

-1

可以使用ng-if还为条件

$scope.MyButton = true; 

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

来源

2016-04-25 09:29:48

这将停止按钮被渲染。 – anierzad

@anierzad如果你在适当的地方使用ng-if，它会显示正确的数据以适当的条件 –

但它不回答原始海报提出的问题。 – anierzad

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

来源

2016-04-25 09:43:10

检查这... 如果你想那么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>

来源

2016-04-25 10:02:47

如何启用或禁用基于angularjs中的值的按钮？

回答

相关问题