Trying to change the class of an element with 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;
}
If $scope.autoScroll is true, apply icon-autoscroll through ng-class. If false, use icon-autoscroll-disabled
The current method results in this error:
Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].How can this be corrected?
UPDATE
Solution 1 (obsolete):
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>
UPDATE 2
Solution 2:
I advocate for using Will's proposed Solution 3 due to its simplicity and clarity when it comes to ternary operators. Here's how it looks:
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>
This translates to:
If autoScroll == true, //apply class 'icon-autoscroll', else //use 'icon-autoscroll-disabled'