Próbuję przełączać klasę elementu za pomocą 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;
}
Zasadniczo, jeśli $scope.autoScroll
jest to prawdą, chcę, aby klasa ng była, icon-autoscroll
a jeśli jest fałszywa, chcę, aby byłaicon-autoscroll-disabled
To, co mam teraz, nie działa i powoduje ten błąd w konsoli
Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].
Jak poprawnie to zrobić?
EDYTOWAĆ
rozwiązanie 1: (nieaktualne)
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>
EDYCJA 2
rozwiązanie 2:
Chciałem zaktualizować rozwiązanie, ponieważ Solution 3
dostarczone przez Stewie powinno być tym, którego użyłem. Jest to najbardziej standardowy jeśli chodzi o operatora trójskładnikowego (i dla mnie najłatwiejszy do odczytania). Rozwiązaniem byłoby
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>
przetłumaczyć na:
if (autoScroll == true) ?
// użyj klasy 'icon-autoscroll' :
// else use'icon-autoscroll-disabled'
autoScroll
tutaj zadziała tylko w każdym przycisku? (Przetestowałem to z wieloma przyciskami i to też działa dobrze) To znaczy, kiedy klikam każdy przycisk, działa tylko na ten przycisk, a nie na wszystkie przyciski.
angular expressions
dokumentach => Brak instrukcji przepływu sterowania: w wyrażeniu kątowym nie można wykonać żadnej z następujących czynności: warunkowe, pętle lub rzut. Użyj innej funkcji lub dyrektywy