javascript - example - ng-class if

AngularJS alterna clase usando ng-class

Question

Estoy tratando de cambiar la clase de un elemento usando ng-class

<button class="btn">
  <i ng-class="{(isAutoScroll()) ? ''icon-autoscroll'' : ''icon-autoscroll-disabled''}"></i>
</button>

isAutoScroll ():

$scope.isAutoScroll = function()
{
    $scope.autoScroll = ($scope.autoScroll) ? false : true;
    return $scope.autoScroll;
}

Básicamente, si $scope.autoScroll es verdadero, quiero que ng-class sea icon-autoscroll y si es falso, quiero que sea icon-autoscroll-disabled

Lo que tengo ahora no funciona y está produciendo este error en la consola

Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? ''icon-autoscroll'' : ''icon-autoscroll-disabled''}].

¿Cómo hago esto correctamente?

EDITAR

Solución 1: (desactualizada)

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="{''icon-autoscroll'': autoScroll, ''icon-autoscroll-disabled'': !autoScroll}"></i>
</button>

Editar 2

solución 2:

Quería actualizar la solución, ya que la Solution 3 , proporcionada por Stewie, debería ser la utilizada. Es el más estándar cuando se trata de un operador ternario (y para mí, el más fácil de leer). La solución sería

<button class="btn" ng-click="autoScroll = !autoScroll">
  <i ng-class="autoScroll ? ''icon-autoscroll'' : ''icon-autoscroll-disabled''"></i>
</button>

se traduce a

if (autoScroll == true) ? // usa la clase ''icon-autoscroll'' : // de lo contrario usa ''icon-autoscroll-disabled''

Answer 1

Agregue más de una clase basada en la condición:

<div ng-click="AbrirPopUp(s)" 
ng-class="{''class1 class2 class3'':!isNew, 
           ''class1 class4'': isNew}">{{ isNew }}</div>

Aplicar: class1 + class2 + class3 cuando es Nuevo = falso ,

Aplicar: class1 + class4 cuando isNew = true

Answer 2

Cómo usar condicional en ng-class:

Solución 1:

<i ng-class="{''icon-autoscroll'': autoScroll, ''icon-autoscroll-disabled'': !autoScroll}"></i>

Solución 2:

<i ng-class="{true: ''icon-autoscroll'', false: ''icon-autoscroll-disabled''}[autoScroll]"></i>

Solución 3 (angular v.1.1.4 + introdujo soporte para operador ternario):

<i ng-class="autoScroll ? ''icon-autoscroll'' : ''icon-autoscroll-disabled''"></i>

Plunker

Answer 3

Como solución alternativa, basada en el operador lógico javascript ''&&'' que devuelve la última evaluación, también puede hacerlo así:

<i ng-class="autoScroll && ''icon-autoscroll'' || !autoScroll && ''icon-autoscroll-disabled''"></i>

Es solo una sintaxis ligeramente más corta, pero para mí más fácil de leer.

Answer 4

El desplazamiento automático se definirá y modificará en el controlador.

<span ng-class= "autoscroll?''class_if_true'':''class_if_false''"></span>

Agregue múltiples clases basadas en condición por:

<span ng-class= "autoscroll?''first second third'':''classes_if_false''"></span>

Answer 5

Hice este trabajo de esta manera:

<button class="btn" ng-click=''toggleClass($event)''>button one</button>
<button class="btn" ng-click=''toggleClass($event)'' >button two</button>

// en tu controlador

 $scope.toggleClass = function (event){
        $(event.target).toggleClass(''active'');
    }

Answer 6

<div data-ng-init="featureClass=false" 
     data-ng-click="featureClass=!featureClass" 
     data-ng-class="{''active'': featureClass}">
    Click me to toggle my class!
</div>

De manera análoga al método toggleClass de jQuery, esta es una manera de activar / desactivar la clase active cuando se hace clic en el elemento.