css - ngclass - ng-style background color

¿Cómo aplico condicionalmente los estilos CSS en AngularJS?

Question

Q1. Supongamos que quiero modificar el aspecto de cada "elemento" que un usuario marca para eliminar antes de presionar el botón principal "eliminar". (Esta retroalimentación visual inmediata debería eliminar la necesidad del proverbial cuadro de diálogo "¿Estás seguro?"). El usuario marcará las casillas de verificación para indicar qué elementos deben eliminarse. Si una casilla de verificación no está marcada, ese elemento debería volver a su aspecto normal.

¿Cuál es la mejor manera de aplicar o eliminar el estilo CSS?

Q2. Supongamos que quiero permitir que cada usuario personalice cómo se presenta mi sitio. Por ejemplo, seleccione de un conjunto fijo de tamaños de fuente, permita colores de fondo y primer plano definibles por el usuario, etc.

¿Cuál es la mejor manera de aplicar el estilo CSS que el usuario selecciona / ingresa?

Answer 1

A partir de AngularJS v1.2.0rc, ng-class e incluso ng-attr-class fallan con elementos SVG (Funcionaron antes, incluso con un enlace normal dentro del atributo de clase)

Específicamente, ninguno de estos trabajos ahora:

ng-class="current==this_element?''active'':'' '' "
ng-attr-class="{{current==this_element?''active'':'' ''}}"
class="class1 class2 .... {{current==this_element?''active'':''''}}"

Como solución, tengo que usar

ng-attr-otherAttr="{{current==this_element?''active'':''''}}"

y luego el estilo usando

[otherAttr=''active''] {
... styles ...
}

Answer 2

Angular proporciona una serie de directivas incorporadas para manipular el estilo CSS condicional / dinámicamente:

• ng-class : se utiliza cuando el conjunto de estilos CSS es estático / conocido antes de tiempo
• ng-style : se utiliza cuando no puede definir una clase CSS porque los valores de estilo pueden cambiar dinámicamente. Pensar en el control programable de los valores de estilo.
• ng-show y ng-hide : úselo si solo necesita mostrar u ocultar algo (modifica CSS)
• ng-if - nuevo en la versión 1.1.5, use en lugar del más detallado ng-switch si solo necesita verificar una sola condición (modifica DOM)
• ng-switch - use en lugar de usar varios ng-shows mutuamente exclusivos (modifica DOM)
• ng-disabled y ng-readonly : se utiliza para restringir el comportamiento del elemento de formulario
• ng-animate - nuevo en la versión 1.1.4, se usa para agregar transiciones / animaciones CSS3

La "forma angular" normal implica vincular una propiedad de modelo / ámbito a un elemento de la interfaz de usuario que acepte la entrada / manipulación del usuario (es decir, usar ng-model), y luego asociar esa propiedad de modelo a una de las directivas incorporadas mencionadas anteriormente.

Cuando el usuario cambia la interfaz de usuario, Angular actualizará automáticamente los elementos asociados en la página.

Q1 suena como un buen caso para ng-class: el estilo CSS se puede capturar en una clase.

ng-class acepta una "expresión" que debe evaluar uno de los siguientes:

1. una cadena de nombres de clase delimitados por espacios
2. una matriz de nombres de clase
3. un mapa / objeto de nombres de clase a valores booleanos

Suponiendo que sus elementos se muestran usando ng-repeat sobre algún modelo de matriz, y que cuando se marca la casilla de verificación de un elemento, se desea aplicar la clase de pending-delete :

<div ng-repeat="item in items" ng-class="{''pending-delete'': item.checked}">
... HTML to display the item ...
<input type="checkbox" ng-model="item.checked">
</div>

Anteriormente, utilizamos el tipo de expresión ng-class # 3 - un mapa / objeto de nombres de clase para valores booleanos.

Q2 suena como un buen caso para el estilo ng: el estilo CSS es dinámico, por lo que no podemos definir una clase para esto.

ng-style acepta una "expresión" que debe evaluarse para:

1. un mapa / objeto de nombres de estilo CSS a valores CSS

Para un ejemplo artificial, supongamos que el usuario puede escribir un nombre de color en un cuadro de texto para el color de fondo (un selector de color jQuery sería mucho mejor):

<div class="main-body" ng-style="{color: myColor}"> ... <input type="text" ng-model="myColor" placeholder="enter a color name"> Fiddle para los dos anteriores.

El violín también contiene un ejemplo de ng-show y ng-hide . Si se marca una casilla de verificación, además del color de fondo que se vuelve rosa, se muestra algo de texto. Si se ingresa ''rojo'' en el cuadro de texto, un div se oculta.

Answer 3

Bueno, le sugeriría que verifique la condición en su controlador con una función que devuelva verdadero o falso .

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

y en su controlador verifique la condición

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

Answer 4

Esta solución hizo el truco para mí

<a ng-style="{true: {paddingLeft: ''25px''}, false: {}}[deleteTriggered]">...</a>

Answer 5

Esto funciona bien cuando no se puede usar ng-class (por ejemplo, al estilo de SVG):

ng-attr-class="{{someBoolean && ''class-when-true'' || ''class-when-false'' }}"

(Creo que necesitas estar en el último Angular inestable para usar ng-attr-, actualmente estoy en 1.1.4)

He publicado un artículo sobre cómo trabajar con AngularJS + SVG. Se habla de este tema y de muchos otros. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Answer 6

Hay una opción más que descubrí recientemente que algunas personas pueden encontrar útil porque le permite cambiar una regla CSS dentro de un elemento de estilo, evitando así la necesidad de un uso repetido de una directiva angular como ng-style, ng-class, ng-show, ng-hide, ng-animate, y otros.

Esta opción hace uso de un servicio con variables de servicio que son establecidas por un controlador y vigiladas por una directiva de atributos que yo llamo "estilo personalizado". Esta estrategia podría usarse de muchas maneras diferentes, y traté de proporcionar alguna orientación general con este fiddle .

var app = angular.module(''myApp'', [''ui.bootstrap'']);
app.service(''MainService'', function(){
var vm = this;
});
app.controller(''MainCtrl'', function(MainService){
var vm = this;
vm.ms = MainService;
});
app.directive(''customStyle'', function(MainService){
return {
restrict : ''A'',
link : function(scope, element, attr){
var style = angular.element(''<style></style>'');
element.append(style);
scope.$watch(function(){ return MainService.theme; },
function(){
var css = '''';
angular.forEach(MainService.theme, function(selector, key){
angular.forEach(MainService.theme[key], function(val, k){
css += key + '' { ''+k+'' : ''+val+''} '';
});
});
style.html(css);
}, true);
}
};
});

Answer 7

He encontrado problemas al aplicar clases dentro de los elementos de la tabla cuando ya tenía una clase aplicada a toda la tabla (por ejemplo, un color aplicado a las filas impares <myClass tbody tr:nth-child(even) td> ). Parece que cuando inspeccionas el elemento con las Herramientas de desarrollo , el element.style no tiene estilo asignado. Así que en lugar de usar ng-class , he intentado usar ng-style y, en este caso, el nuevo atributo CSS aparece dentro de element.style . Este código funciona muy bien para mí:

<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="myvar === 0 && {''background-color'': ''red''} ||
myvar === 1 && {''background-color'': ''green''} ||
myvar === 2 && {''background-color'': ''yellow''}">{{ myvar }}</td>
[...more amazing code...]
</tr>

Lo que estoy evaluando es Myvar , y en cada caso aplico un estilo a cada <td> según el valor de myvar , que sobrescribe el estilo actual aplicado por la clase CSS para toda la tabla.

ACTUALIZAR

Si desea aplicar una clase a la tabla, por ejemplo, al visitar una página o en otros casos, puede usar esta estructura:

<li ng-class="{ active: isActive(''/route_a'') || isActive(''/route_b'')}">

Básicamente, lo que necesitamos para activar una clase ng es la clase a aplicar y una declaración verdadera o falsa. Verdadero aplica la clase y falso no. Entonces aquí tenemos dos verificaciones de la ruta de la página y un OR entre ellas, así que si estamos en /route_a O estamos en route_b , se route_b la clase activa .

Esto funciona simplemente teniendo una función lógica a la derecha que devuelve verdadero o falso.

Entonces, en el primer ejemplo, ng-style está condicionado por tres afirmaciones. Si todos ellos son falsos, no se aplica ningún estilo, pero siguiendo nuestra lógica, se aplicará al menos uno, por lo tanto, la expresión lógica verificará qué comparación de variables es verdadera y porque una matriz no vacía siempre es verdadera, eso será Dejó una matriz como retorno y con solo una verdad, considerando que estamos usando O para la respuesta completa, se aplicará el estilo restante.

Por cierto, olvidé darte la función isActive ():

$rootScope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};

NUEVA ACTUALIZACIÓN

Aquí tienes algo que me parece realmente útil. Cuando necesita aplicar una clase dependiendo del valor de una variable, por ejemplo, un icono que depende del contenido del div , puede usar el siguiente código (muy útil en ng-repeat ):

<i class="fa" ng-class="{ ''fa-github'' : type === 0,
''fa-linkedin'' : type === 1,
''fa-skype'' : type === 2,
''fa-google'' : type === 3 }"></i>

Iconos de fuente impresionante

Answer 8

Otra forma (en el futuro) de aplicar condicionalmente el estilo es mediante la creación condicional de un estilo de ámbito

<style scoped type="text/css" ng-if="...">
</style>

Pero hoy en día solo FireFox soporta estilos de alcance.

Answer 9

Otra opción cuando necesita un estilo css simple de una o dos propiedades:

Ver:

<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="{''background-color'': getTrColor(element.myvar)}">
{{ element.myvar }}
</td>
[...more amazing code...]
</tr>

Controlador:

$scope.getTrColor = function (colorIndex) {
switch(colorIndex){
case 0: return ''red'';
case 1: return ''green'';
default: return ''yellow'';
}
};

Answer 10

Puedes usar expresión ternaria. Hay dos maneras de hacer esto:

<div ng-style="myVariable > 100 ? {''color'': ''red''} : {''color'': ''blue''}"></div>

o...

<div ng-style="{''color'': (myVariable > 100) ? ''red'' : ''blue'' }"></div>

Answer 11

Una cosa para observar es que, si el estilo CSS tiene guiones, debe eliminarlos. Así que si quieres establecer background-color , la forma correcta es:

ng-style="{backgroundColor:myColor}"

Answer 12

Vea el siguiente ejemplo

<!DOCTYPE html>
<html ng-app>
<head>
<title>Demo Changing CSS Classes Conditionally with Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="res/js/controllers.js"></script>
<style>
.checkboxList {
border:1px solid #000;
background-color:#fff;
color:#000;
width:300px;
height: 100px;
overflow-y: scroll;
}
.uncheckedClass {
background-color:#eeeeee;
color:black;
}
.checkedClass {
background-color:#3ab44a;
color:white;
}
</style>
</head>
<body ng-controller="TeamListCtrl">
<b>Teams</b>
<div id="teamCheckboxList" class="checkboxList">
<div class="uncheckedClass" ng-repeat="team in teams" ng-class="{''checkedClass'': team.isChecked, ''uncheckedClass'': !team.isChecked}">
<label>
<input type="checkbox" ng-model="team.isChecked" />
<span>{{team.name}}</span>
</label>
</div>
</div>
</body>
</html>

Answer 13

span class="circle circle-{{selectcss(document.Extension)}}">

y codigo

$scope.selectcss = function (data) {
if (data == ''.pdf'')
return ''circle circle-pdf'';
else
return ''circle circle-small'';
};

css

.circle-pdf {
width: 24px;
height: 24px;
font-size: 16px;
font-weight: 700;
padding-top: 3px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background-image: url(images/pdf_icon32.png);
}