Classe ng JS angulaire complexe

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

Conceptuellement, ce que je veux réaliser 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 de classe, l'attribut ng-class est omis. Comment faire fonctionner mon exemple sans changer le contrôleur? Est-ce même possible, ou devrais-je définir la classe dans le contrôleur à la place (ce que je souhaite éviter)?

38
demandé sur White Dragon 2012-11-28 18:37:24

5 réponses

J'avais besoin de plusieurs classes où l'une était dérivée de $scope et d'autres étaient des classes littérales. Merci à L'indice D'André, ci-dessous a travaillé pour moi.

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>
12
répondu Nitin Arora 2015-02-25 23:40:50

Une solution rapide serait de définir la classe box dans l'attribut ng-class: 

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

Si vous voulez 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 angulaires ne prennent pas en charge l'opérateur ternaire, mais elles peuvent être émulées comme ceci:

Condition && (réponse si vrai (true) || (réponse si la valeur est false)

62
répondu Andre Goncalves 2014-07-16 15:09:24

Edit: pour les nouvelles versions D'Angular voir Nitins réponse car il est le meilleur atm

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

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

J'ai remplacé votre {{class}} par {{myScopedObj.classesToAdd}} pour montrer que n'importe quelle variable étendue ou même un objet un peu plus complexe peut être utilisé de cette façon.

Ainsi, chaque élément DIV crated de cette façon aura la classe" box " et n'importe quelle classe contenu dans myScopedObj.classesToAdd (utile lors de l'utilisation de ng-repeat et chaque élément du tableau doit avoir une classe différente appliquée), et il aura la classe "mini" si !isMaximized.

4
répondu pootzko 2017-05-23 12:09:30

Une autre façon de le faire sans doubles accolades et inclut des variables de portée, testées avec angular v1. 2+.

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

C'est aussi plutôt sympa car la variable peut utiliser différents types comme index sans augmenter la complexité en utilisant des ternaires. Il peut également supprimer tout besoin de négations ;) Voici un violon lien

3
répondu denixtry 2015-05-09 04:33:51

Vous pouvez utiliser une expression simple donnée ci-dessous 

ng-class="{'active' : itemCount, 'activemenu' : showCart}"
2
répondu Vivek Panday 2015-06-02 05:16:26