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.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 3Stewieから提供されたを使用する必要があるため、ソリューションを更新したかった。三項演算子に関しては（そして私にとっては最も読みやすく）、これが最も標準的です。解決策は

<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>

プランカー

代替ソリューションとして、最後の評価を返す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>

適用：クラス1クラス2 + + Class3のときisNewが偽=、

適用：isNew = trueのときのclass1 + class4

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

jQueryのtoggleClassメソッドと同様に、これは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');
    }