AngularJS ng-style avec une expression conditionnelle


267

Je traite mon problème comme ceci:

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

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

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

Comment puis-je faire ceci?


17
quelle version d'angular utilisez-vous? Au moins avec 1.1.5, cela est possible sans aucune modification. démo
Yoshi

J'utilise 1.0.8 :) Oh tant pis, je devrais vraiment essayer de mettre à jour alors ... merci!
TigrouMeow

4
Bien qu'avec 1.1.5, votre code fonctionne, si vous utilisez d'autres propriétés de style au lieu de la largeur (par exemple, font-size), votre code ne fonctionnera pas tant que vous ne le changerez pas en: ng-style = "{ 'font-size' : myObject.value == 'ok'? '20px': '10px'} "(doit entourer la propriété de style de guillemets).
BornToCode

Je ne sais pas si cela est utile, mais pour les nouveaux arrivants, vous pouvez utiliser le style ng avec un objet, mais comme celui-ci ng-style = "objectBit? {'Border': '1px solid red'}: {'border': 'none'}"
Usman I

Réponses:


124

Comme l'a dit @Yoshi, à partir de la version angulaire 1.1.5, vous pouvez l'utiliser sans aucune modification.

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

.largeWidth {
    width: 100%;
}

.smallWidth {
    width: 0%;
}

// [...]

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

3
D'accord merci! Je me demandais simplement s'il y avait un moyen de le faire sans utiliser de classes, mais tout en utilisant directement Angular sur le modèle.
TigrouMeow

1
Comment l'utiliser pour plus d'un nom de classe?
Thanigainathan

3
Et si j'utilise angulaire> 1.1.5?
bigpony

14
Cela ne répond pas exactement à la question.
Lee

1
Cette question demande littéralement un exemple avec le style ng et la réponse acceptée avec 100+ votes ne le fournit pas.
JWiley

361

exemple simple:

<div ng-style="isTrue && {'background-color':'green'} || {'background-color': 'blue'}" style="width:200px;height:100px;border:1px solid gray;"></div>

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

OU le même résultat:

<div ng-style="isTrue && {'background-color':'green'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

autre possibilité conditionnelle:

<div ng-style="count === 0 && {'background-color':'green'}  || count === 1 && {'background-color':'yellow'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

Comment pourrais-je accomplir cela, mais avec plusieurs styles / conditions indépendants? Merci, bonne réponse btw.
Adam Plocher

@Arthur votre exemple va vérifier isTrue et {'background-color':'green'} OU il va vérifier seulement isTrueet mettra background comment cela fonctionnera s'il vous plaît expliquer à personne?
Rajnish Rajput

1
@ rajnish-rajput, il va vérifier isTrue et mettre background, {'background-color': 'green'} par défaut, retourner true comme objet de style
Arthur Tsidkilov

100

Vous pouvez y arriver comme ça:

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

43

@jfredsilva a évidemment 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 de type ternaire:

<p ng-style="{width: {true:'100%',false:'0%'}[myObject.value == 'ok']}"></p>

Quelque chose de plus complexe:

<p ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">Test</p>

Si $scope.color == 'blueish', la couleur sera «bleu».

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

angular.module('app',[]);
function MyCtrl($scope) {
  $scope.color = 'blueish';
  $scope.zoom = 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl" ng-style="{
   color:       {blueish: 'blue', greenish: 'green'}[ color ], 
  'font-size':  {0: '12px', 1: '18px', 2: '26px'}[ zoom ]
}">
  color = {{color}}<br>
  zoom = {{zoom}}
</div>


syntaxe intéressante {<value>:'<string>'}[<$scope.var>]}, d'où vient-elle?
netalex

10

si vous voulez l'utiliser avec une expression, la meilleure façon est:

<span class="ng-style: yourCondition && {color:'red'};">Sample Text</span>

mais la meilleure façon est d'utiliser la classe ng


Syntax Error: Token '%3A' is%20an%20unexpected%20token at column 9 of the expression [ng-style%3A%...
Z. Khullah

9

Sur une note générique, vous pouvez utiliser une combinaison de ng-ifet ng-styleincorporer des modifications conditionnelles avec une modification de l'image d'arrière-plan.

<span ng-if="selectedItem==item.id"
              ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)','background-size':'52px 57px','padding-top':'70px','background-repeat':'no-repeat','background-position': 'center'}"></span>
        <span ng-if="selectedItem!=item.id"
              ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)','background-size':'52px 57px','padding-top':'70px','background-repeat':'no-repeat','background-position': 'center'}"></span>

Cela Uncaught Error: Template parse errors: Can't bind to 'ng-style' since it isn't a known property of 'div'm'a causé une erreur
Serj Sagan

6

Pour une propriété CSS unique

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

Pour plusieurs propriétés css ci-dessous peuvent être référencées

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

Remplacez 1 == 1 par votre expression de condition


4

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

  ng-style="<$scope.var><condition> ? {
        '<css-prop-1>':((<value>) / (<value2>)*100)+'%',
        '<css-prop-2>':'<string>'
      } : {
        '<css-prop-1>':'<string>',
        '<css-prop-2>':'<string>'
      }"

<value>sont les valeurs de la 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 un calcul dans les valeurs des propriétés css.


3

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

<div ng-style="{{valueFromJS}} === 'Hello' ? {'color': 'red'} : {'color': ''} && valueFromNG-Repeat === '{{dayOfToday}}' ? {'font-weight': 'bold'} : {'font-weight': 'normal'}"></div>

2

J'utilise ng-class pour ajouter du style: -

 ng-class="column.label=='Description'  ? 'tableStyle':                     
           column.label == 'Markdown Type' ? 'Mtype' : 
           column.label == 'Coupon Number' ? 'couponNur' :  ''
           "

Utilisation de l' opérateur ternaire avec des directives de classe ng dans angular.js pour donner du style. Définissez ensuite le style de classe dans Css ou .scss fichier. Par exemple :-

.Mtype{
       width: 90px !important;
       min-width: 90px !important;
       max-width: 90px !important;
      }
.tableStyle{
         width: 129px !important;
         min-width: 129px !important;
         max-width: 129px !important;
}
.couponNur{
         width: 250px !important;
         min-width: 250px !important;
         max-width: 250px !important;
}

-1

Je ne sais pas comment cela fonctionne pour vous, mais sur Angular 9, je dois envelopper ngStyle entre crochets comme ceci:

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

Sinon ça ne marche pas

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.