AngularJS перемикає клас за допомогою ng-класу

Я намагаюся переключити клас елемента за допомогою 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;
}

В основному, якщо $scope.autoScrollце правда, я хочу, щоб клас ng був, icon-autoscrollа якщо його помилковим, я хочу, щоб він бувicon-autoscroll-disabled

Те, що я зараз не працює, створює цю помилку в консолі

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

Як правильно це зробити?

EDIT

рішення 1: (застаріле)

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

EDIT 2

рішення 2:

Я хотів оновити рішення, оскільки Solution 3, надане Стюі, повинно бути таким, яке використовувалося. Це найбільш стандартно, якщо мова йде про потрійний оператор (і мені це найлегше читати). Рішення було б

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

перекладається на:

if (autoScroll == true) ?// використовувати клас 'icon-autoscroll' :// else use'icon-autoscroll-disabled'

Як використовувати умовне в ng-класі:

Рішення 1:

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

Рішення 2:

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

Рішення 3 (кутова v.1.1.4 + введена підтримка потрійного оператора):

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

Плункер

Як альтернативне рішення, засноване на логічному операторі javascript '&&', яке повертає останню оцінку, ви також можете зробити це так:

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

Це лише трохи коротший синтаксис, але мені легше читати.

Додайте більше одного класу на основі умови:

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

Застосувати: class1 + class2 + class3, коли isNew = false ,

Застосувати: class1 + class4, коли isNew = true

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

Аналогічно toggleClassметоду jQuery , це спосіб activeувімкнення / вимкнення класу при натисканні на елемент.

в контролері буде визначено та змінено автоскролл.

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

Додайте кілька класів на основі умови:

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

Я зробив цю роботу таким чином:

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

// у вашому контролері

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