ng-Class — несколько условий и классов

Я искал примеры нескольких условий в ng-class, но не могу найти ту же терминологию. Вот пример того, чего я хочу добиться.

ng-class="isSelected? 'side_menu_link_active': 'side_menu_link_disabled', pageSelected == 'лекции'? 'link_active': 'link_disabled'"

Кто-нибудь знает правильный синтаксис для этого? Спасибо.


javascript angularjs ng-class
person Diogo Barroso    schedule 28.01.2015    source источник
comment
см. мой обновленный ответ ниже.   -  person SoluableNonagon    schedule 28.01.2015

Ответы (2)


arrow_upward
7
arrow_downward

Если вам нужно несколько условий, синтаксис:

ng-class=" {className: valueToCheckForTruthiness, otherClassName: otherValue  } "

Пример использования ваших имен классов:

ng-class="{side_menu_link_active: isSelected, side_menu_link_disabled: !isSelected, link_active: pageSelected == 'lectures', link_disabled: pageSelected != 'lectures'   }"

Вы можете пойти дальше и сгенерировать объект с помощью функции:

$scope.classGenerator = function(isSelected, pageSelected){
     var obj = {};
     isSelected ? obj.side_menu_link_active=true : obj.side_menu_link_disabled = false;
     pageSelected == 'lectures' ? obj.link_active = true : obj.link_disabled = false;
     return obj;
}
ng-class="classGenerator(isSelected, pageSelected)"
person SoluableNonagon    schedule 28.01.2015
comment
просто для работы с несколькими элементами с использованием этого метода требуется третья переменная ( isSelected, pageSelected, модуль), затем сравните pageSelected == модуль - person Diogo Barroso; 28.01.2015
comment
Существует множество способов работы с ng-class, дополнительную информацию см. в официальной документации. - person SoluableNonagon; 28.01.2015

arrow_upward
1
arrow_downward

Вы можете сделать это через запятую

<div ng-class="{'isClicked1' : click, 'isClicked2' :!click}">

Посмотрите мой рабочий jsfiidle

person Nisham Mahsin    schedule 28.01.2015