Как изменить класс кнопки при смене слайда?

0

У меня есть ионная коробка слайдов с 4 слайдами. Вы можете переключаться между слайдами, нажимая кнопки в нижней части экрана или вы можете просто прокручивать пальцем. Клавиша "active" необходимо добавить к кнопке, когда активен соответствующий слайд.

Например, если второй слайд активен, я хочу, чтобы вторая кнопка имела класс 'active'. Когда вы переходите на третий слайд (нажав третью кнопку или сдвинув экран), класс "активный" удаляется со второй кнопки и добавляется к третьей кнопке.

Классы теперь меняются при нажатии на кнопку, но не при прокрутке слайдов. Как исправить это, используя 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);
    }

});
  • 0
    Посмотрите на мой отредактированный ответ!
Теги:
slide
slideshow
ionic

1 ответ

0

Просто используйте функции addClass (className) и removeClass (className)

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

Вы можете инициализировать переменную (текущую) с первой (если есть хотя бы одна), а затем, как только следующий активный элемент будет запущен, удалите класс из текущего, а затем установите самый новый элемент в текущий. Это повторяется снова и снова!

  • 0
    извините, но я все еще не понимаю @Gacci
  • 0
    Что вы используете? JavaScript, JQuery и т. Д.!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню