168 votes

style ngClass avec tiret dans la clé

J'espère que cela évitera à quelqu'un de se casser la tête avec des styles qui utilisent des tirets, surtout depuis que bootstrap est devenu si populaire.

J'utilise angular 1.0.5 par l'intermédiaire de

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

Dans le Documentation sur les ngClass L'exemple est simple, mais il mentionne également que l'expression peut être une carte de noms de classes vers des valeurs booléennes. J'essayais d'utiliser le style "icon-white" sur mon icône, comme indiqué dans l'exemple suivant documentation sur le bootstrap en fonction d'une variable booléenne.

<i class="icon-home" ng-class="{icon-white: someBooleanValue}">

La ligne ci-dessus ne fonctionne pas. La classe n'est pas complétée par icon-white quand une certaine valeur booléenne est vraie. Cependant, si je change la clé en iconWhite, elle est ajoutée avec succès à la liste des valeurs de classe. Comment ajouter une valeur avec un tiret ?

372voto

Foo L Points 3570

Après des heures de bidouillage, il s'avère que le tiret est interpolé ! Des citations sont nécessaires.

<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">

J'espère que cela aidera quelqu'un à ne pas s'arracher les cheveux.

UPDATE :

Dans les anciennes versions d'Angular, l'utilisation d'une barre oblique inversée fait également l'affaire, mais pas dans les nouvelles versions.

<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">

La première solution est probablement préférable, car vous pouvez la rechercher dans votre éditeur préféré.

11voto

Bromoxid Points 53

\'icon-white\' fonctionne également (avec AngularJS 1.2.7)

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