angularjs Angular Js ng-disabled按钮的颜色无论是启用还是禁用都保持不变

pieyvz9o  于 2023-09-30  发布在  Angular
关注(0)|答案(3)|浏览(114)

我正在使用angueljs ng-disable功能在适当的时候禁用一个按钮。它工作正常,但用户很难判断按钮是否被禁用,因为它没有完全变灰。如果您将光标悬停在按钮上,您可以告诉它是禁用的,但按钮的颜色看起来与禁用时相同。是否有一个标准的样式来使用,当它被禁用时,对用户来说会更明显。我没有与风格非常,所以我道歉,如果这是显而易见的。

f87krz0w

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;
}
2j4z5cfb

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
gdx19jrr

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>

相关问题