AngularJS chuyển đổi lớp bằng ng-class

Tôi đang cố gắng chuyển đổi lớp của một phần tử bằng cách sử dụ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;
}

Về cơ bản, nếu $scope.autoScrolllà đúng, tôi muốn ng-class là icon-autoscrollvà nếu nó sai, tôi muốn nó làicon-autoscroll-disabled

Những gì tôi có bây giờ không hoạt động và đang tạo ra lỗi này trong bảng điều khiển

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

Làm thế nào để tôi làm điều này một cách chính xác?

BIÊN TẬP

giải pháp 1: (lỗi thời)

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

CHỈNH SỬA 2

giải pháp 2:

Tôi muốn cập nhật giải pháp vì Solution 3, được cung cấp bởi Stewie, nên là giải pháp được sử dụng. Đó là tiêu chuẩn nhất khi nói đến toán tử ternary (và với tôi dễ đọc nhất). Giải pháp sẽ là

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

Dịch sang:

if (autoScroll == true) ?// sử dụng lớp 'icon-autoscroll' :// sử dụng khác'icon-autoscroll-disabled'

Cách sử dụng có điều kiện trong ng-class:

Giải pháp 1:

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

Giải pháp 2:

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

Giải pháp 3 (góc v.1.1.4 + hỗ trợ được giới thiệu cho toán tử ternary):

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

Plunker

Là giải pháp thay thế, dựa trên toán tử logic javascript '&&' trả về đánh giá cuối cùng, bạn cũng có thể thực hiện việc này như sau:

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

Nó chỉ ngắn hơn một chút, nhưng đối với tôi dễ đọc hơn.

Thêm nhiều hơn một lớp dựa trên điều kiện:

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

Áp dụng: class1 + class2 + class3 khi isNew = false ,

Áp dụng: class1 + class4 khi 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>

Tương tự như toggleClassphương thức của jQuery , đây là một cách để bật / tắt activelớp khi phần tử được nhấp.

autoscroll sẽ được xác định và sửa đổi trong bộ điều khiển.

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

Thêm nhiều lớp dựa trên điều kiện bằng cách:

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

Tôi đã thực hiện công việc này theo cách này:

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

// trong bộ điều khiển của bạn

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