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

【问题标题】：Angular Js ng-disabled the color of the button stays the same whether it is enabled or disabledAngular Js ng-disabled 按钮的颜色无论是启用还是禁用都保持不变
【发布时间】：2019-12-15 01:58:34
【问题描述】：

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

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

您可以降低按钮的不透明度。假设按钮有一个 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;
}

【讨论】：

谢谢，我刚刚找到了一个可以使用的禁用 .jpg 文件，当它被禁用时如何使用其他图像
我不建议使用图像来显示按钮已禁用。如果你想使用它，请检查我的编辑
我已经编辑了我的答案，但我建议你只使用 CSS

【解决方案2】：

在控制器集中

$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

【讨论】：

如果按钮没有被禁用，代码将添加带有背景图像的按钮类，这不符合问题的要求