web-dev-qa-db-fra.com

Comment changer CSS quand il est ng-désactivé?

J'ai ce button:

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

Mais même lorsqu'il est désactivé, il a le même class qu'il est activé, mais pas cliquable. Je souhaite modifier l'arrière-plan lorsqu'il est désactivé afin que l'utilisateur puisse voir ce bouton, est désactivé. Comment puis je faire ça? Ai-je besoin de ng-disabled Classe CSS ou il existe un autre moyen?

cssangularjs
19
None

utilisation 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}" />

cela ajoutera la classe css diabled-class à l'entrée lorsque PayoutEnabled est false (!! PayoutEnabled est vrai).

20
K.Toress

Ce que @KToress a répondu devrait fonctionner correctement, mais vous n'avez pas du tout besoin de l'aide d'AngularJS ici. Vous pouvez utiliser CSS3 car vous avez déjà une classe dessus. Exemple:

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

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

Edit: Vous pouvez le tester immédiatement sur cette page de StackOverflow. Inspectez simplement l'élément et placez l'attribut disabled sur le bouton bleu et voyez qu'il est 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>
39
Shashank Agrawal

AngularJS ajoute une pseudo-classe désactivé lorsque ng-désactivé est faux donc je pense que voici la solution la plus simple pour se référer au bouton désactivé:

button:disabled {
    color:#717782;
}
9
klaxon