Question

我想知道当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>

在div之间切换。

$scope.goTo = function(x) {
    $scope.sw = x;
}

返回一个班级或另一个班级。

$scope.oneClassOrAnother= function() {
    if (...) return "class1";
    else return "class2";
}

非常感谢。

Answer 1

看起来你没有正确使用ng-class语法。尝试这样的事情：

TransitionGroup

其中oneClassOrAnother（）返回true或false，“class1”是该类的名称。

以下是使用ng-class和ng-switch-when时的一个工作示例：http://plnkr.co/edit/n86SKEktRcPnBy05o8eZ?p=preview

Angular ngClass docs：https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

我认为你的代码一切都很好，看看这个插件，我再现它和它的工作。将此与您的代码进行比较，也许您已经忘记了控制器？

http://plnkr.co/edit/Lz7L3S?p=preview

我猜的唯一不同之处在于，我从控制器启动了sw，而不是从视图启动。

<div ng-switch on="sw">

ng-switch-when和ng-class兼容性

2 个答案: