如何在禁用ng时更改CSS？

Question

我有这个button:

<input type="submit" value="@Translator.Translate("PAYOUT")"
     class="btn-block secondary-button save-changes padding-8"
     ng-disabled="PayoutEnabled==false" ng-click="PayOut()" />

但即使它被禁用它也与class启用相同,只是不可点击.我想在禁用时更改背景,以便用户可以看到该按钮被禁用.我怎样才能做到这一点？我需要一些ng-disabledCSS课程还是有其他方法？

Answer 1

@KToress回答的应该可以正常工作但你根本不需要AngularJS的帮助.你可以使用CSS3,因为你已经有了一个类.例:

input.save-changes {
   // some style when the element is active
}

input.save-changes[disabled] {
   // styles when the element is disabled
   background-color: #ddd;
}

编辑:您可以立即在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>

Answer 2

使用 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}" />

这将CSS类添加diabled-class时输入的PayoutEnabled是false(!PayoutEnabled是真的).

Answer 3

当ng-disabled为false时,AngularJS添加伪类禁用,所以我认为这是引用禁用按钮的最简单的解决方案:

button:disabled {
    color:#717782;
}