Совместимость с 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

Другие вопросы по тегам