296 votes

AngularJS ng-style avec une expression conditionnelle

Je gère mon problème de cette manière :

ng-style="{ width: getTheValue() }"

Mais pour éviter d'avoir cette fonction côté contrôleur, je préférerais beaucoup faire quelque chose comme ceci :

ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }"

Comment puis-je faire cela ?

399voto

arthur_3589897 Points 21

Exemple simple:

{'background-color':'green'} RETOUR true

OU le même résultat:

autre possibilité conditionnelle:

127voto

Comme l'a dit @Yoshi, à partir de angular 1.1.5 vous pouvez l'utiliser sans aucun changement.

Si vous utilisez angular < 1.1.5, vous pouvez utiliser ng-class.

.largeWidth {
    width: 100%;
}

.smallWidth {
    width: 0%;
}

// [...]

ng-class="{largeWidth: myVar == 'ok', smallWidth: myVar != 'ok'}"

122voto

jfredsilva Points 1316

Vous pouvez y parvenir comme ça:

ng-style="{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }"

46voto

Kit Points 123

@jfredsilva a clairement la réponse la plus simple à la question :

ng-style="{ 'width' : (myObject.value == 'ok') ? '100%' : '0%' }"

Cependant, vous voudrez peut-être vraiment considérer ma réponse pour quelque chose de plus complexe.

Exemple semblable à un opérateur ternaire :

Quelque chose de plus complexe :

Test

Si $scope.color == 'blueish', la couleur sera 'bleue'.

Si $scope.zoom == 2, la taille de police sera de 26px.

angular.module('app',[]);
function MyCtrl($scope) {
  $scope.color = 'blueish';
  $scope.zoom = 2;
}

  couleur = {{color}}
  zoom = {{zoom}}

11voto

Lucas Roselli Points 2742

Si vous souhaitez utiliser une expression, la bonne manière est :

Texte d'exemple

mais la meilleure façon est d'utiliser ng-class

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X