AngularJS ng-style avec une expression conditionnelle

Question

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 ?

Answer 1

De manière générique, vous pouvez utiliser une combinaison de ng-if et ng-style pour incorporer des changements conditionnels avec un changement d'image de fond.

Answer 2

Pour une seule propriété css

ng-style="1==1 && {'color':'red'}"

Pour plusieurs propriétés css, vous pouvez vous référer ci-dessous

ng-style="1==1 && {'color':'red','font-style': 'italic'}"

Remplacez 1==1 par votre expression conditionnelle

Answer 3

Aussi cette syntaxe pour l'opérateur ternaire fonctionnera :

  ng-style="<$scope.var> ? {
        '':(() / ()*100)+'%',
        '':''
      } : {
        '':'',
        '':''
      }"

où sont des valeurs de propriété $scope. Par exemple :

ng-style="column.histograms.value=>0 ? 
  {
    'width':((column.histograms.value) / (column.histograms.limit)*100)+'%',
    'background':'#F03040'
  } : {
    'width':'1px',
    'background':'#2E92FA'
  }"

```

cela permet d'effectuer des calculs dans les valeurs des propriétés CSS.

Answer 4

Je fais comme ci-dessous pour des conditions multiples et indépendantes et cela fonctionne comme un charme :

Answer 5

EDIT :

D'accord, je n'étais pas au courant auparavant que AngularJS fait généralement référence à la version v1 d'Angular et seulement Angular à Angular v2+

Cette réponse s'applique uniquement à Angular

Je laisse ceci ici pour référence future..

---

Je ne suis pas sûr de comment ça fonctionne pour vous autres, mais sur Angular 9 je dois envelopper ngStyle entre crochets comme ceci :

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

Sinon cela ne fonctionne pas