Совместимость с ng-switch-when и ng-class
Мне было интересно, не было ли проблем с совместимостью, когда ng-switch-when и ng-class используют один и тот же элемент, как в этом примере.
Я пытаюсь динамически изменить класс этих четырех элементов, но по некоторым причинам это работает не для всех из них, а только для того, кто отображается в данный момент.
Кто-нибудь знает, что здесь происходит?
<div>
<div ng-switch="sw" ng-init="sw=1">
<div ng-switch-when="1" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="2" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="3" ng-class="oneClassOrAnother()"></div>
<div ng-switch-when="4" ng-class="oneClassOrAnother()"></div>
</div>
<div>
<button ng-click="goTo(1)">1</button>
<button ng-click="goTo(2)">2</button>
<button ng-click="goTo(3)">3</button>
<button ng-click="goTo(4)">4</button>
</div>
</div>
Переключайтесь между делами.
$scope.goTo = function(x) {
$scope.sw = x;
}
Верните один класс или другой.
$scope.oneClassOrAnother= function() {
if (...) return "class1";
else return "class2";
}
Большое спасибо.
2 ответа
Я думаю, что все хорошо с вашим кодом, посмотрите на этот план, я воспроизвел его и он работает. Сравните это с вашим кодом, может быть, вы забыли о контроллере?
http://plnkr.co/edit/Lz7L3S?p=preview
Единственная разница, я думаю, в том, что я инициировал sw
из контроллера, а не из поля зрения.
<div ng-switch on="sw">
Не похоже, что вы используете синтаксис класса ng правильно. Попробуйте что-то вроде этого:
<div ng-class="{class1: oneClassOrAnother()}" ng-switch-when="1">1</div>
Где oneClassOrAnother() возвращает true или false, а "class1" - это имя класса.
Вот рабочий пример использования ng-class и ng-switch-когда вместе: http://plnkr.co/edit/n86SKEktRcPnBy05o8eZ?p=preview
Документы Angular ngClass: https://docs.angularjs.org/api/ng/directive/ngClass