Я пытаюсь переключить класс элемента с помощью `НГ-класса
<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;
}
В принципе, если $объем.автопрокрутка-это правда, я хочу на НГ-класса значок-автопрокрутка и если его значение false, я хочу, чтобы это быть иконку-автопрокрутка-инвалидов
Что у меня сейчас это'т работать и производить эту ошибку в консоли
Ошибка: Ошибка анализатора: неожиданные следующий символ в Столбцах 18-18 [?] в выражение [{(isAutoScroll()) ? 'икона-автопрокрутка' : 'икона-автопрокрутка-инвалидов'}].
Как мне правильно это сделать?
Редактировать
Решение 1: (устарел)
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>
Редактировать 2
решение 2:
Я хотел обновить решение, как решение 3`, при Стьюи, должны быть использованы. Это самый стандартный, когда дело доходит до тернарный оператор (и мне легче читать). Решение будет
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>
переводится как:
если (автопрокрутка == правда) ?
//используем класс 'икона-автопрокрутка' :
//Еще использовать 'икона-автопрокрутка-инвалидов'
Использование условного в НГ-класса:
Решение 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 (угловой В. 1.1.4+ введена поддержка тернарный оператор):
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
Как альтернативное решение, основанное на JavaScript логический оператор '&ампер;&ампер;', которая возвращает последние оценки, вы можете также делать это так:
<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>
Это's только немного короче синтаксис, но для меня легче читать.
Добавить больше чем один класс исходя из условия:
<div ng-click="AbrirPopUp(s)"
ng-class="{'class1 class2 class3':!isNew,
'class1 class4': isNew}">{{ isNew }}</div>
Применение: класс1 + класс2 + класс_3, когда в <сильный>жизнью=ложь</сильные>, <п> Применение: класс 1+ класс 4, когда в <сильный>жизнью=истина</сильные>
<div data-ng-init="featureClass=false"
data-ng-click="featureClass=!featureClass"
data-ng-class="{'active': featureClass}">
Click me to toggle my class!
</div>
Аналог на jQuery's метод toggleClass
, это способ переключения "активную" класса вкл/выкл, когда элемент нажали.
автопрокрутка будет определен и изменен в регулятор.
в <период НГ-класс= "и автопрокрутка?'class_if_true':'class_if_false'" и></службы>
Добавить несколько классов на основе условия:
<период НГ-класс= "и автопрокрутка?'Первый второй третий':'classes_if_false'" и></службы>
Я сделал эту работу таким образом:
<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');
}