web-dev-qa-db-fra.com

Angular ng-class if else

J'aimerais savoir comment faire pour faire la classe False ng.

page.isSelected (1) est TRUE si la page si la page est sélectionnée, sinon FALSE

<div id="homePage" ng-class="{ center: page.isSelected(1) }">

Je te veux donc si:

isSelected est TRUE: centre

isSelected est FALSE: à gauche

J'ai essayé:

<div id="homePage" ng-class="{ page.isSelected(1) 'center : 'left' }">

mais ça ne marche pas.

Je ne sais pas ce que je fais mal. Pouvez-vous m'aider s'il vous plaît?

javascripthtmlangularjsng-class
31
BlackCode

Il suffit de faire une règle pour chaque cas:

<div id="homePage" ng-class="{ 'center': page.isSelected(1) , 'left': !page.isSelected(1)  }">

Ou utilisez l'opérateur ternaire:

<div id="homePage" ng-class="page.isSelected(1) ? 'center' : 'left'">
65
John Conde

Vous pouvez utiliser la notation d'opérateur ternaire:

<div id="homePage" ng-class="page.isSelected(1)? 'center' : 'left'">
27
ryeballar

Les réponses John Conde et ryeballar sont correctes et fonctionneront.

Si vous voulez devenir trop geek:

  • John's a l'inconvénient de devoir prendre deux décisions par boucle $ digest (il doit décider d'ajouter ou de supprimer center et d'ajouter ou de supprimer left), lorsque Clairement, un seul est nécessaire.

  • Ryeballar repose sur l'opérateur ternaire qui sera probablement supprimé à un moment donné (car la vue ne devrait contenir aucune logique). (Nous ne pouvons pas être sûrs qu'il sera effectivement supprimé et ce ne sera probablement pas bientôt, mais s'il existe une solution plus "sûre", pourquoi pas?)

Donc, vous pouvez faire ce qui suit comme alternative:

ng-class="{true:'center',false:'left'}[page.isSelected(1)]"
9
gkalpak