我正在使用angueljs ng-disable功能在适当的时候禁用一个按钮。它工作正常,但用户很难判断按钮是否被禁用,因为它没有完全变灰。如果您将光标悬停在按钮上,您可以告诉它是禁用的,但按钮的颜色看起来与禁用时相同。是否有一个标准的样式来使用,当它被禁用时,对用户来说会更明显。我没有与风格非常,所以我道歉,如果这是显而易见的。
f87krz0w1#
您可以降低按钮的不透明度。假设button有一个disableButton类你也可以在ng-class中添加这个类'disableButton'来指定你为ng-disabled指定的条件对于按钮:(根据您的评论)
<button data-ng-hide="isDisabled" type="button" ng-class="{'disableButton': isDisabled}" ng-disabled="isDisabled">Submit</button> <img src="images/image_name.jpg" data-ng-show="isDisabled">
CSS:另外,如果你不想使用图片,你可以使用下面的CSS来使它更好
.disableButton{ opacity: 0.35; background: #eee; color: #444; }
2j4z5cfb2#
在控制器组中
$scope.isDisabled=true; // when you want to disable the button
入按钮
<button type="button" ng-class="{isDisabled ?'Button':'disableButton'}" ng-disabled="isDisabled" >Submit</button>
在Css中
.disableButton{ background-color:#ffff; }`enter code here` .Button{ background-image:url('your url of the image'); }ter code here
gdx19jrr3#
<input type="text" id="Matter" name="Matter Number" ng-model="MatterNumber" placeholder="Matter Number"> <md-button id="disebledBTN" style="width: 90%; min-width: 100px; background: #338146; color: white; border: 3px; border-radius: 10px; " ng-click="getFilebase64()" ng-disabled="!MatterNumber" ng-style="{ 'background-color' : !MatterNumber ? 'rgb(143 199 158)' : '#338146' }"> Upload</md-button>
3条答案
按热度按时间f87krz0w1#
您可以降低按钮的不透明度。假设button有一个disableButton类
你也可以在ng-class中添加这个类'disableButton'来指定你为ng-disabled指定的条件
对于按钮:(根据您的评论)
CSS:另外,如果你不想使用图片,你可以使用下面的CSS来使它更好
2j4z5cfb2#
在控制器组中
入按钮
在Css中
gdx19jrr3#