html - multiple - AngularJS ngClass condicional
ng-class ejemplos (10)
Hay un método simple que podría usar con el atributo de clase html y la taquigrafía si / else. No hay necesidad de hacerlo tan complejo. Sólo tiene que utilizar el siguiente método.
<div class="{{expression == true ? ''class_if_expression_true'' : ''class_if_expression_false'' }}">Your Content</div>
Feliz Codificación, Nimantha Perera
¿Hay alguna forma de hacer una expresión para que algo como ngClass sea un condicional? Por ejemplo, he intentado lo siguiente:
<span ng-class="{test: ''obj.value1 == /'someothervalue/'''}">test</span>
El problema con este código es que no importa qué es obj.value1, la prueba de clase siempre se aplica al elemento. Haciendo esto:
<span ng-class="{test: obj.value2}">test</span>
Mientras obj.value2 no sea igual a un valor veraz, la clase no se aplica. Ahora puedo solucionar el problema en el primer ejemplo haciendo esto:
<span ng-class="{test: checkValue1()}">test</span>
donde la función checkValue1 se ve así:
$scope.checkValue1 = function() {
return $scope.obj.value === ''somevalue'';
}
Me pregunto si así es como se supone que ngClass funciona. También estoy creando una directiva personalizada donde me gustaría hacer algo similar a esto. Sin embargo, no puedo encontrar una manera de ver una expresión (y tal vez eso sea imposible y la razón por la que funciona así).
Aquí hay un plnkr para mostrar lo que quiero decir:
La sintaxis angular es usar el operador : para realizar el equivalente de un modificador if
<div ng-class="{ ''clearfix'' : (row % 2) == 0 }">
Agregue la clase clearfix a las filas pares. No obstante, la expresión podría ser cualquier cosa que podamos tener en condiciones normales y debería ser verdadera o falsa.
Les mostraré dos métodos mediante los cuales puede aplicar dinámicamente la clase ng
Paso 1
Mediante el uso de operador ternario
<div ng-class="condition?''class1'':''class2''"></div>
Salida
Si su condición es verdadera, entonces se aplicará class1 a su elemento, de lo contrario se aplicará class2.
Desventaja
Cuando intente cambiar el valor condicional en el tiempo de ejecución, la clase no cambiará de alguna manera. Por lo tanto, le sugeriré que vaya al paso 2 si tiene un requisito como el cambio dinámico de clase.
Paso 2
<div ng-class="{value1:''class1'', value2:''class2''}[condition]"></div>
Salida
si su condición coincide con value1, entonces class1 se aplicará a su elemento, si coincide con value2, entonces class2 se aplicará y así sucesivamente. Y el cambio dinámico de clase funcionará bien con él.
Espero que esto te ayudará.
Para Angular 2, usa este
<div [ngClass]="{''active'': dashboardComponent.selected_menu == ''mapview''}">Content</div>
Tu primer intento fue casi correcto, debería funcionar sin las comillas.
{test: obj.value1 == ''someothervalue''}
Aquí hay un plnkr .
La directiva ngClass funcionará con cualquier expresión que evalúe truthy o falsey, un poco similar a las expresiones de Javascript, pero con algunas diferencias, puede leer here . Si su condicional es demasiado complejo, entonces puede usar una función que devuelva truey o falsey, como lo hizo en su tercer intento.
Solo para complementar: También puede usar operadores lógicos para formar expresiones lógicas como
ng-class="{''test'': obj.value1 == ''someothervalue'' || obj.value2 == ''somethingelse''}"
Usando ng-class dentro de ng-repeat
<table>
<tbody>
<tr ng-repeat="task in todos"
ng-class="{''warning'': task.status == ''Hold'' , ''success'': task.status == ''Completed'',
''active'': task.status == ''Started'', ''danger'': task.status == ''Pending'' } ">
<td>{{$index + 1}}</td>
<td>{{task.name}}</td>
<td>{{task.date|date:''yyyy-MM-dd''}}</td>
<td>{{task.status}}</td>
</tr>
</tbody>
</table>
Para cada estado en task.status se usa una clase diferente para la fila.
Usar la función con ng-class es una buena opción cuando alguien tiene que ejecutar una lógica compleja para decidir la clase CSS adecuada.
http://jsfiddle.net/ms403Ly8/2/
HTML:
<div ng-app>
<div ng-controller="testCtrl">
<div ng-class="getCSSClass()">Testing ng-class using function</div>
</div>
</div>
CSS:
.testclass { Background: lightBlue}
JavaScript :
function testCtrl($scope) {
$scope.getCSSClass = function() {
return "testclass ";
}
}
Veo grandes ejemplos arriba, pero todos comienzan con llaves (mapa json). Otra opción es devolver un resultado basado en el cálculo. El resultado también puede ser una lista de nombres de clase css (no solo de mapa). Ejemplo:
ng-class="(status==''active'') ? ''enabled'' : ''disabled''"
o
ng-class="(status==''active'') ? [''enabled''] : [''disabled'', ''alik'']"
Explicación: si el estado está activo, se utilizará la clase enabled . De lo contrario, se utilizará la clase disabled
La lista [] se usa para usar varias clases (no solo una).
utilizar esta
<div ng-class="{states}[condition]"></div>
por ejemplo, si la condición es [2 == 2], los estados son {true: ''...'', false: ''...''}
<div ng-class="{true: ''ClassA'', false: ''ClassB''}[condition]"></div>
Angular JS proporciona esta funcionalidad en la directiva de clase ng . En el que puedes poner condición y también asignar clase condicional. Puedes lograr esto de dos maneras diferentes.
Tipo 1
<div ng-class="{0:''one'', 1:''two'',2:''three''}[status]"></div>
En este código, la clase se aplicará de acuerdo con el valor del valor de estado .
Si el valor del estado es 0 , aplique la clase uno.
Si el valor de estado es 1 , aplique la clase dos.
Si el valor de estado es 2 , aplique la clase tres.
Tipo 2
<div ng-class="{1:''test_yes'', 0:''test_no''}[status]"></div>
¿En qué clase se aplicará por valor de estado?
si el valor de estado es 1 o verdadero, entonces se agregarán los test_yes de clase
si el valor del estado es 0 o falso , se agregará la clase test_no