У меня есть ионная коробка слайдов с 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);
}
});
Просто используйте функции addClass (className) и removeClass (className)
currentElement.removeClass('active');
nextActiveElement.addClass('active');
Вы можете инициализировать переменную (текущую) с первой (если есть хотя бы одна), а затем, как только следующий активный элемент будет запущен, удалите класс из текущего, а затем установите самый новый элемент в текущий. Это повторяется снова и снова!