ng devre dışıyken CSS nasıl değiştirilir?

Question

Ben bu button:

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

Ama bu sadece tıklanamıyorsa, Etkinleştirildiğinden aynı class sahiptir etkisiz hale bile. Devre dışı bırakıldığında arka planı değiştirmek istiyorum, böylece kullanıcı bu düğmeyi görebilir, devre dışı bırakılabilir. Bunu nasıl yapabilirim? Bazı ng-disabled CSS sınıfına mı ihtiyacım var yoksa başka bir yolu var mı?

Answer 1

kullanım 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}" /> 

PayoutEnabledfalse olduğunda bu girişe css sınıfını diabled-class katacak (! PayoutEnabled geçerlidir).

Answer 2

@KToress'in yanıtı iyi olmalı, ancak AngularJS'nin yardımına ihtiyacınız yok. Zaten bir sınıfınız olduğu için düz CSS'den yararlanabilirsiniz. Örnek:

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

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

Düzenleme: hemen StackOverflow bu sayfada test edebilirsiniz. Sadece elemanı kontrol edin ve Mavi düğmeye disabled özniteliğini koyun ve CSS'yi görün.

.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 3

angularjs sözde sınıf ekler engelling özürlü yüzden burada düşünmek engelli düğmeye başvurmak için en basit çözümdür yanlış olduğunda:

button:disabled { 
    color:#717782; 
}