¿Hay alguna forma de hacer una expresión para algo como ng-classser 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 lo que obj.value1sea, la prueba de clase siempre se aplica al elemento. Haciendo esto:

<span ng-class="{test: obj.value2}">test</span>

Mientras obj.value2no sea igual a un valor verdadero, 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 checkValue1función se ve así:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

Me pregunto si así es como ng-classse supone que debe funcionar. 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 es imposible y la razón por la que funciona así).

Aquí hay un plnkr para mostrar lo que quiero decir.

Su 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 verdadero o falso, un poco similar a las expresiones Javascript pero con algunas diferencias, puede leer aquí . Si su condicional es demasiado complejo, puede usar una función que devuelva verdadero o falso, 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.

Angular JS proporciona esta funcionalidad en la directiva ng-class . En el que puede poner condición y también asignar clase condicional. Puede lograr esto de dos maneras diferentes.

Tipo 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

En este código de clase se aplica de acuerdo con el valor de estado de valor

si el valor de 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 , agregará la clase test_yes

si el valor de estado es 0 o falso , agregará la clase test_no

Veo excelentes 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 un mapa). Ejemplo:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

o

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

Explicación: Si el estado está activo, se enabledusará la clase . De lo contrario, disabledse utilizará la clase .

La lista []se usa para usar múltiples clases (no solo una).

Hay un método simple que podría usar con el atributo de clase html y la abreviatura si / si no. No hay necesidad de hacerlo tan complejo. Solo usa el siguiente método.

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

Happy Coding, Nimantha Perera

Le mostraré dos métodos por los cuales puede aplicar dinámicamente ng-class

Paso 1

Mediante el uso de operador ternario

<div ng-class="condition?'class1':'class2'"></div>

Salida

Si su condición es verdadera, se aplicará la clase 1 a su elemento; de lo contrario, se aplicará la clase 2.

Desventaja

Cuando intente cambiar el valor condicional en tiempo de ejecución, la clase de alguna manera no cambiará. Por lo tanto, le sugiero que vaya al paso 2 si tiene requisitos 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 el valor1, entonces se aplicará la clase1 a su elemento, si coincide con el valor2, se aplicará la clase2 y así sucesivamente. Y el cambio dinámico de clase funcionará bien con él.

Espero que esto te ayudará.

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 si se debe evaluar como verdadero o falso.

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 ";
  }     
}

utilizar este

<div ng-class="{states}[condition]"></div>

por ejemplo, si la condición es [2 == 2], los estados son {verdadero: '...', falso: '...'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

Para Angular 2, use esto

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

ng-classes una directiva de AngularJs centrales. En el que puede utilizar "Sintaxis de cadena", "Sintaxis de matriz", "Expresión evaluada", "Operador ternario" y muchas más opciones que se describen a continuación:

ngClass usando la sintaxis de cadena

Esta es la forma más sencilla de usar ngClass. Simplemente puede agregar una variable angular a ng-class y esa es la clase que se utilizará para ese elemento.

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

Ejemplo de demostración de ngClass usando la sintaxis de cadena

ngClass usando la sintaxis de matriz

Esto es similar al método de sintaxis de cadenas, excepto que puede aplicar varias clases.

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass usando expresión evaluada

Un método más avanzado para usar ngClass (y uno que probablemente usará más) es evaluar una expresión. La forma en que esto funciona es que si se evalúa una variable o expresión true, puede aplicar una determinada clase. Si no, entonces la clase no se aplicará.

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

Ejemplo de ngClass usando expresión evaluada

ngClass usando valor

Esto es similar al método de expresión evaluado, excepto que solo puede comparar múltiples valores con la única variable.

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass usando el operador ternario

El operador ternario nos permite usar la taquigrafía para especificar dos clases diferentes, una si una expresión es verdadera y otra para falso. Aquí está la sintaxis básica para el operador ternario:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

Evaluación del primer, último o número específico

Si está utilizando la ngRepeatdirectiva y que desea aplicar a la clases first, lasto un número específico en la lista, puede utilizar las propiedades especiales de ngRepeat. Estos incluyen $first, $last, $even, $odd, y algunos otros. Aquí hay un ejemplo de cómo usarlos.

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>