我试图用 "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
。
我现在所做的并不奏效,在控制台中产生了这样的错误
错误。Lexer错误。在表达式[{(isAutoScroll()) ? 'icon-autooscroll': 'icon-autooscroll-disabled'}]中,在第18-18列[?]
我怎样才能正确地做到这一点?
EDIT
解决方案1:(过时的)。
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>
编辑2
解决方案2。
我想更新一下解决方案,因为Stewie提供的 "解决方案3 "应该被使用。当涉及到三元运算符时,它是最标准的(对我来说也是最容易阅读的)。该方案将是
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>
译为。
如果(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(angular v.1.1.4+引入了对三元运算符的支持)。
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>