css - 禁用 ng 时如何更改 CSS？

Question

我有这个按钮:

<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-disabled CSS 类还是有其他方法？

Answer 1

Toress 的回答应该可以正常工作，但您在这里根本不需要 AngularJS 的帮助( native 实现和使用总是最好的)。

您可以使用 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>