Ng-class complexe pour angular js

Question

J'ai le composant et j'ai un problème pour lui attribuer la classe css. Je veux qu'il ait toujours une classe "box", puis des classes supplémentaires spécifiées par l'argument "class" de la directive et une classe conditionnelle "mini".

Conceptuellement, ce que je veux obtenir est quelque chose comme ceci :

<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>

Le problème est que lorsque je définis l'attribut html class, l'attribut ng-class est omis. Comment faire fonctionner mon exemple sans modifier le contrôleur ? Est-ce que c'est possible, ou dois-je plutôt définir la classe dans le contrôleur (ce que je souhaite éviter) ?

Answer 1

Une solution rapide consisterait à définir la classe de la boîte dans l'attribut ng-class :

<div data-ng-class="{mini: !isMaximized, box: true}"></div>

Si vous souhaitez inclure une variable de portée en tant que classe, vous ne pouvez pas utiliser ng-class :

<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">

Les expressions Angular ne prennent pas en charge l'opérateur ternaire, mais il peut être émulé comme suit :

condition && (réponse si vrai) || (réponse si faux)

Answer 2

J'avais besoin de plusieurs classes dont l'une était dérivée de $scope et les autres étaient des classes littérales. Grâce à l'astuce d'André, le document ci-dessous a fonctionné pour moi.

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>

Answer 3

Edit : pour les versions plus récentes d'Angular, voir Réponse de Nitins car c'est le meilleur actuellement

Pour moi, cela a fonctionné (je travaille sur AngularJS v1.2.14 en ce moment, donc je suppose que 1.2.X+ devrait supporter cela, je ne suis pas sûr pour les versions antérieures) :

<div class="box" data-ng-class="{ {{myScopedObj.classesToAdd}}: true, mini: !isMaximized }"></div>

J'ai remplacé votre {{class}} con {{myScopedObj.classesToAdd}} pour montrer que n'importe quelle variable scopée ou même un objet un peu plus complexe peut être utilisé de cette manière.

Ainsi, chaque élément DIV créé de cette manière aura la classe "box" et toute classe contenue dans l'élément myScopedObj.classesToAdd (utile lorsque l'on utilise ng-repeat et que chaque élément du tableau doit avoir une classe différente), et il aura la classe "mini" si !isMaximized .

Answer 4

Une autre façon de le faire sans double accolade et en incluant les variables scope, testé avec angular v1.2+.

<div ng-class="['box', 
                aClass, 
               {true:'large': false: 'mini'}[isMaximized]]"></div>

C'est aussi assez agréable parce que la variable peut utiliser différents types comme index sans augmenter la complexité en utilisant des ternaires. Cela peut également supprimer tout besoin de négation ;) Voici un lien vers le violon

Answer 5

Vous pouvez utiliser l'expression simple suivante

ng-class="{'active' : itemCount, 'activemenu' : showCart}"