如何在禁用 ng 时更改 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31206104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change CSS when it's ng-disabled?
提问by None
I have this button:
我有这个button：
<input type="submit" value="@Translator.Translate("PAYOUT")"
class="btn-block secondary-button save-changes padding-8"
ng-disabled="PayoutEnabled==false" ng-click="PayOut()" />
But even when it's disabled it has the same classas it's enabled, just not clickable. I want to change background when it's disabled so that user can see that button, is disabled. How can I do that? Do I need some ng-disabledCSS class or there is some other way?
但即使它被禁用，它也与class启用时一样，只是不可点击。我想在禁用时更改背景，以便用户可以看到该按钮被禁用。我怎样才能做到这一点？我需要一些ng-disabledCSS 类还是有其他方法？
回答by Shashank Agrawal
What Toressanswered should work fine but you don't need the help of AngularJS here at all (a native implementation & usage is always best).
什么Toress回答应该能正常运行，但你并不需要在这里所有AngularJS的帮助（本地实现和使用始终是最好的）。
You can make use of CSS3 since you already have a class on it. Example:
你可以使用 CSS3，因为你已经有了一个类。例子：
input.save-changes {
/* some style when the element is active */
}
input.save-changes[disabled] {
/* styles when the element is disabled */
background-color: #ddd;
}
Edit:You can immediately test it on this page of StackOverflow. Just inspect the blue button element and put the disabledattribute and see it's CSS.
编辑：您可以立即在 StackOverflow 的此页面上对其进行测试。只需检查蓝色按钮元素并放置disabled属性并查看它的 CSS。
.save-changes {
background-color: red;
padding: 7px 13px;
color: white;
border: 1px solid red;
font-weight: bold;
}
.save-changes[disabled] {
background-color: #FF85A1
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="PayoutEnabled = true">
<a href="#" ng-click="PayoutEnabled = !PayoutEnabled">
{{PayoutEnabled ? 'Disable' : 'Enable'}} the below button</a>
<br>
<br>
<input class="save-changes" type="submit" value="PAYOUT" ng-disabled="PayoutEnabled == false" />
</div>回答by Kalhan.Toress
use ng-class
用 ng-class
<input type="submit" value="@Translator.Translate("PAYOUT")" class="btn-block
secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false"
ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />
this will add css class diabled-classto the input when PayoutEnabledis false(!PayoutEnabled is true).
这将CSS类添加diabled-class时输入的PayoutEnabled是false（！PayoutEnabled是真的）。
回答by klaxon
AngularJS adds pseudo-class disabledwhen ng-disabledis falseso i think here is the simplest solution to refer to disabled button :
当ng-disabled为false时，AngularJS 添加了禁用的伪类，所以我认为这是引用禁用按钮的最简单的解决方案：
button:disabled {
color:#717782;
}
回答by Mauricio Gracia Gutierrez
In case you are using Bootstrapand a more recent Angularversion than AngularJsyou can ovverride the default style adding this to the styles.cssfile
如果您使用的Bootstrap是更新的Angular版本，AngularJs您可以将默认样式添加到styles.css文件中
.btn.disabled, .btn:disabled {
opacity: .35 !important;
background-color: gray !important;
}
The higher the opacity the darker or more solid the color will be.
不透明度越高，颜色越深或越纯。
