angularjs - for - Complex angular js ng-class

ng class for angular 6

Question

Tengo el componente y tengo problemas para configurar la clase css. Quiero que siempre tenga una clase de "cuadro", luego tener clases adicionales especificadas por el argumento de la directiva "clase" y una clase condicional "mini".

Conceptualmente, lo que quiero lograr es algo como esto:

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

El problema es que cuando configuro el atributo html de clase, se omite el atributo ng-class. ¿Cómo hacer que mi ejemplo funcione sin cambiar el controlador? ¿Es posible, o debo configurar la clase en el controlador (lo cual deseo evitar)?

Answer 1

Necesitaba varias clases donde una era $ scope derivada y otras eran clases literales. Gracias a la sugerencia de Andre, a continuación funcionó para mí.

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

Answer 2

Otra forma de hacerlo es sin llaves dobles e incluye variables de alcance, probadas con angular v1.2 +.

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

También es bastante agradable porque la variable puede usar diferentes tipos como un índice sin aumentar la complejidad usando ternaries. También puede eliminar cualquier necesidad de negaciones;) Aquí hay un enlace de violín

Answer 3

Puedes usar la expresión simple dada a continuación

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

Answer 4

Una solución rápida sería definir la clase box dentro del atributo ng-class:

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

Si desea incluir una variable de ámbito como una clase, no puede usar ng-class:

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

Las expresiones angulares no son compatibles con el operador ternario, pero se pueden emular de esta manera:

condición && (respuesta si es verdadera) || (respuesta si es falso)

Answer 5

Editar: para las versiones más nuevas de Angular ver respuestas de Nitins ya que es el mejor cajero automático

Para mí, esto funcionó (estoy trabajando en AngularJS v1.2.14 en este momento, así que supongo que 1.2.X + debería ser compatible con esto, no estoy seguro de las versiones anteriores):

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

{{myScopedObj.classesToAdd}} tu {{class}} con {{myScopedObj.classesToAdd}} para mostrar que cualquier variable de ámbito o incluso un objeto un poco más complejo se puede usar de esta manera.

Entonces, cada elemento DIV creado de esta manera tendrá una clase "box" y cualquier clase contenida dentro de myScopedObj.classesToAdd (útil cuando se usa ng-repeat y cada elemento en la matriz necesita tener una clase diferente aplicada), y tendrá el " mini "clase if !isMaximized .