Question

我有一个带有4个幻灯片的离子滑动盒。您可以通过单击屏幕底部的按钮在幻灯片之间切换，也可以只需用手指滚动即可。等级＆＃39;活跃＆＃39;当相应的幻灯片处于活动状态时，需要将其添加到按钮中。

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

当您单击按钮时，类现在会更改，但在幻灯片之间滚动时不会更改。如何使用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');

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

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

1 个答案: