更改幻灯片时如何更改按钮的类？

Question

我有一个带有 4 张幻灯片的离子幻灯片盒。您可以通过单击屏幕底部的按钮在幻灯片之间切换，也可以简单地用手指滚动。当相应的幻灯片处于活动状态时，需要将“活动”类添加到按钮。

例如，如果第二张幻灯片处于活动状态，我希望第二个按钮具有“活动”类。当您移动到第三张幻灯片（通过单击第三个按钮或通过滑动屏幕）时，“活动”类将从第二个按钮中删除并添加到第三个按钮。

现在，当您单击按钮时课程会发生变化，但在幻灯片之间滚动时不会发生变化。如何使用 AngularJS 解决这个问题？

Codepen 链接：http://codepen.io/lu-kanemon/pen/doBNGz

这是我的代码：

menu.html

    <ion-view view-title="Menu">

    <ion-content class="padding">

        <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">

            <ion-slide>
                <h1 class="slide-title"> Matches </h1>
            </ion-slide>

            <ion-slide>
                <h1 class="slide-title"> Fitting jobs </h1>
            </ion-slide>

            <ion-slide>
                <h1 class="slide-title"> Interesting events </h1>
            </ion-slide>

            <ion-slide>
                <h1 class="slide-title"> Group conversations with open positions </h1>
            </ion-slide>

        </ion-slide-box>

    </ion-content>

    <div class="contacts-filters felix-filters button-bar">
        <a class="button button-stable" ng-class="{active: selected=='m'}" ng-click="slide(0); selected='m'"><i class="fa fa-users"></i></a>
        <a class="button button-stable" ng-class="{active: selected=='j'}" ng-click="slide(1); selected='j'"><i class="fa fa-suitcase"></i></a>
        <a class="button button-stable" ng-class="{active: selected=='e'}" ng-click="slide(2); selected='e'"><i class="fa fa-map"></i></a>
        <a class="button button-stable" ng-class="{active: selected=='c'}" ng-click="slide(3); selected='c'"><i class="fa fa-comments"></i></a>
    </div>

</ion-view>

MenuCtrl.js

 myApp

    .controller('MenuCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate){

    //switch slides
    $scope.slide = function(to) {
        $scope.current = to;
        $ionicSlideBoxDelegate.slide(to);
    }

});

Answer 1

只需使用addClass(className) 和removeClass(className) 函数

currentElement.removeClass('active');
nextActiveElement.addClass('active');

您可以使用第一个（如果至少有一个）初始化一个变量（当前），然后一旦下一个活动元素被触发，从当前删除该类，然后将最新的元素设置为当前。如此反复！