AngularJS สลับคลาสโดยใช้ ng-class

ฉันพยายามที่จะสลับชั้นขององค์ประกอบที่ใช้ 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'}].

ฉันจะทำอย่างถูกต้องได้อย่างไร

แก้ไข

โซลูชันที่ 1: (ล้าสมัย)

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

แก้ไข 2

โซลูชันที่ 2:

ฉันต้องการอัปเดตโซลูชันSolution 3ตามที่ Stewie จัดหาให้ควรใช้ มันเป็นมาตรฐานมากที่สุดเมื่อพูดถึงผู้ประกอบการที่สาม (และสำหรับฉันที่ง่ายที่สุดในการอ่าน) ทางออกจะเป็นอย่างไร

<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 (เชิงมุม v.1.1.4 + แนะนำการสนับสนุนสำหรับผู้ประกอบการที่ประกอบไปด้วย):

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

Plunker

ในฐานะที่เป็นโซลูชันสำรองขึ้นอยู่กับตัวดำเนินการตรรกะจาวาสคริปต์ '&&' ซึ่งส่งคืนการประเมินล่าสุดคุณยังสามารถทำสิ่งนี้เช่นกัน:

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

สมัคร: class1 + + class2 Class3 เมื่อisNew = false ,

ใช้: class1 + class4 เมื่อ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>

คล้ายกับtoggleClassวิธีของ jQuery นี่เป็นวิธีการสลับเปิดactive/ ปิดคลาสเมื่อองค์ประกอบถูกคลิก

autoscroll จะถูกกำหนดและแก้ไขในคอนโทรลเลอร์

<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');
    }