[解決済み] ng-classを使用したAngularJSのトグルクラス

質問

ある要素のクラスを切り替えるのに 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-class を 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' : //その他の用途 'icon-autoscroll-disabled'

解決方法は？

ng-classで条件分岐を使用する方法。

解決策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 (angular v.1.1.4+ で三項演算子のサポートが導入されました)。

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

プランカー