Класс переключения 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.autoScrolltrue, я хочу, чтобы ng-class был, icon-autoscrollа если false, я хочу, чтобы он былicon-autoscroll-disabled

То, что у меня сейчас не работает и выдает эту ошибку в консоли

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

Как мне правильно сделать это?

РЕДАКТИРОВАТЬ

Решение 1: (устарело)

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

РЕДАКТИРОВАТЬ 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' :// еще использовать'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>

Plunker

В качестве альтернативного решения, основанного на логическом операторе 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');
    }