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

คำตอบ #1

วิธีใช้เงื่อนไขใน 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 ขึ้นไปเพิ่มการสนับสนุนตัวดำเนินการแบบ ternary):

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

พลังก์เกอร์

คำตอบ #2

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

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

มันเป็นไวยากรณ์ที่สั้นกว่าเล็กน้อย แต่สำหรับฉันอ่านง่ายกว่า

คำตอบ #3

เพิ่มหลายคลาสตามเงื่อนไข:

<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