Класс переключения AngularJS с использованием ng-класса


217

Я пытаюсь переключить класс элемента с помощью 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.autoScrolltrue, я хочу, чтобы ng-class был, icon-autoscrollа если false, я хочу, чтобы он был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предоставлено Стьюи. Он является самым стандартным, когда дело доходит до троичного оператора (и мне легче всего читать). Решение будет

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


нельзя использовать условные выражения в angular expressionsper docs => Нет выражений потока управления: вы не можете выполнять одно из следующих действий в угловом выражении: условные выражения, циклы или бросок. Используйте другую функцию или директиву
charlietfl

@ Ронни Я видел твое решение, и это было так круто. но мне интересно, почему autoScrollздесь будет просто эффект в каждой кнопке? (Я протестировал это с несколькими кнопками, и это тоже хорошо работает) Я имею в виду, когда я нажимаю каждую кнопку, это влияет только на эту кнопку, а не на все кнопки.
zx1986

Ответы:


436

Как использовать условное в ng-классе:

Решение 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 (угловой v.1.1.4 + введена поддержка троичного оператора):

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

Plunker


3
Второй пример чище, но смешно, что вы не можете поместить переменную, которую вы оцениваете, в начало выражения ... это просто смешно. Представьте себе выражение выражения if: "if (variable) true: сделать это, false: сделать это ... тьфу #fullynerdy
mattdlockyer

10
@Stewie Faaakin великолепный друг, нравится, как он выглядит как реальный код, а не какая-то убогая разметка выражений: D
mattdlockyer

На самом деле оценка значения вначале весьма полезна, поскольку позволяет избежать случайного присвоения переменной нового значения.
Жарби

Ternary это именно то, что я искал. Хорошая работа, предоставив три примера с подробностями поддержки версий.
TaeKwonJoe

13

В качестве альтернативного решения, основанного на логическом операторе javascript '&&', который возвращает последнюю оценку, вы также можете сделать это следующим образом:

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

Это только немного короче синтаксис, но для меня легче читать.


10

Добавьте более одного класса в зависимости от условия:

<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


6
<div data-ng-init="featureClass=false" 
     data-ng-click="featureClass=!featureClass" 
     data-ng-class="{'active': featureClass}">
    Click me to toggle my class!
</div>

По аналогии с toggleClassметодом jQuery , это способ включения active/ выключения класса при нажатии на элемент.


2
Не могли бы вы предоставить больше информации о вашем ответе на английском языке? Чем он отличается от ответов, которые уже здесь?
Онотс

2
Я не уверен, почему у этого ответа есть много отрицательных голосов ?? Это решение, которое на самом деле сработало для меня лучше, чем другие выше ...
Пауло Грайеттнер

2
Я думаю, что описание написано плохо, и люди реагируют на слово «jQuery». Что подразумевается под описанием «Это аналог функции toggleClass в JQuery». Кстати, вам нужно инициализировать переменную?
Дизайн Адриана

1

Автопрокрутка будет определена и изменена в контроллере.

<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>

Добавить несколько классов в зависимости от условия:

<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>


-1

Я сделал эту работу следующим образом:

<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');
    }

2
Хотя это работает, вы смешиваете angular и jQuery. Вы должны попытаться избежать этого, если можете. То, что первоначально было задано, может быть сделано без события щелчка. Что если у вас есть другая кнопка, которая должна переключать этот класс на вашей кнопке выше? Он не будет обновляться сейчас, потому что вы меняете его по клику, а не через ng-класс
Ронни

1
Это из jqLite. Для получения дополнительной документации docs.angularjs.org/api/ng/function/angular.element
Рухул Амин

1
Я понимаю. Я хочу сказать, что вам не нужно ничего использовать в jQuery, чтобы получить ответ на оригинальный вопрос.
Ронни
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.