web-dev-qa-db-fra.com

Complexe angular js ng-class

J'ai le composant et j'ai un problème pour lui assigner la classe css. Je veux qu'il ait toujours une classe de "box", puis avoir des classes supplémentaires spécifiées par l'argument de la 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 de contrôleur? Est-ce même possible, ou devrais-je plutôt définir la classe dans le contrôleur (que je souhaite éviter)?

angularjsng-class
38
Szymon Wygnański

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

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

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 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 angulaires ne prennent pas en charge l'opérateur ternaire, mais il peut être émulé comme ceci:

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

62
Andre Goncalves

Edit: pour les versions plus récentes de Angular see Nitins answer as it is the best one atm

Pour moi, cela a fonctionné (je travaille actuellement sur AngularJS v1.2.14, donc je suppose que 1.2.X + devrait le prendre en charge, je ne suis pas sûr des versions antérieures):

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

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

Ainsi, chaque élément DIV créé de cette façon aura une classe "box" et toute classe contenue 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
pootzko

Une autre façon de le faire sans accolades doubles 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 d'index sans augmenter la complexité en utilisant des ternaires. Il peut également supprimer tout besoin de négations;) Voici un lien violon

3
denixtry

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

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