AngularJS beralih kelas menggunakan ng-class

Saya mencoba untuk beralih kelas menggunakan elemen 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;
}

Pada dasarnya, jika $scope.autoScrollitu benar, saya ingin menjadi kelas ng icon-autoscrolldan jika itu salah, saya menginginkannyaicon-autoscroll-disabled

Apa yang saya miliki sekarang tidak berfungsi dan menghasilkan kesalahan ini di konsol

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

Bagaimana saya melakukan ini dengan benar?

EDIT

solusi 1: (ketinggalan jaman)

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

EDIT 2

solusi 2:

Saya ingin memperbarui solusi karena Solution 3, yang disediakan oleh Stewie, harus menjadi yang digunakan. Ini adalah yang paling standar ketika datang ke operator ternary (dan bagi saya paling mudah dibaca). Solusinya adalah

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

diterjemahkan menjadi:

if (autoScroll == true) ?// gunakan kelas 'icon-autoscroll' :// gunakan lagi'icon-autoscroll-disabled'

Cara menggunakan conditional di ng-class:

Solusi 1:

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

Solusi 2:

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

Solusi 3 (angular v.1.1.4 + memperkenalkan dukungan untuk operator ternary):

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

Plunker

Sebagai solusi alternatif, berdasarkan operator logika javascript '&&' yang mengembalikan evaluasi terakhir, Anda juga dapat melakukannya seperti ini:

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

Ini hanya sintaks yang sedikit lebih pendek, tetapi bagi saya lebih mudah dibaca.

Tambahkan lebih dari satu kelas berdasarkan kondisi:

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

Terapkan: class1 + class2 + class3 ketika isNew = false ,

Terapkan: class1 + class4 ketika 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>

Analog dengan toggleClassmetode jQuery , ini adalah cara untuk mengaktifkan active/ menonaktifkan kelas ketika elemen diklik.

autoscroll akan didefinisikan dan dimodifikasi dalam pengontrol.

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

Tambahkan beberapa kelas berdasarkan kondisi dengan:

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

Saya membuat ini bekerja dengan cara ini:

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

// di controller Anda

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