Ng sınıfı kullanarak AngularJS geçiş sınıfı

Kullanarak bir öğenin sınıf geçiş yapmaya çalışıyorum 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;
}

Temel olarak, eğer $scope.autoScrolldoğruysa, ng sınıfı olmasını istiyorum icon-autoscrollve eğer yanlışsa, olmasını istiyorumicon-autoscroll-disabled

Şu an sahip olduğum şey çalışmıyor ve bu hatayı konsolda üretiyor

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

Bunu nasıl doğru bir şekilde yapabilirim?

DÜZENLE

çözüm 1: (modası geçmiş)

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

DÜZENLEME 2

çözüm 2:

Solution 3Stewie tarafından sağlanan çözümün kullanılması gerektiği gibi çözümü güncellemek istedim . Üçlü operatör söz konusu olduğunda (ve benim için en kolayı) en standart olanıdır. Çözüm

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

Çevirir:

if (autoScroll == true) ?// sınıfı kullan 'icon-autoscroll' :// başka kullan'icon-autoscroll-disabled'

Ng-class'da koşullu nasıl kullanılır:

Çözüm 1:

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

Çözüm 2:

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

Çözüm 3 (açısal v.1.1.4 + üçlü operatör için destek sağladı):

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

Plunker

Alternatif bir çözüm olarak, son değerlendirmeyi döndüren javascript mantık operatörü '&&' temel alınarak, bunu şu şekilde de yapabilirsiniz:

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

Sadece biraz daha kısa bir sözdizimi, ama benim için daha kolay okunabilir.

Duruma göre birden fazla sınıf ekleyin:

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

Uygula: isNew = false olduğunda class1 + class2 + class3 ,

Uygula: isNew = true olduğunda 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'nin toggleClassyöntemine benzer şekilde , bu activeöğe tıklandığında sınıfı açıp kapatmak için bir yoldur .

otomatik kaydırma denetleyicide tanımlanacak ve değiştirilecektir.

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

Koşula bağlı olarak birden fazla sınıf ekleyin:

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

Bu işi şu şekilde yaptım:

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

// kumandanızda

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