带按钮栏的离子滑动框

Question

我有一个带有4个幻灯片的离子滑动盒.您可以通过单击屏幕底部的按钮在幻灯片之间切换.当相应的幻灯片处于活动状态时,如何将类"活动"(使用AngularJS)添加到按钮？

例如,如果第二张幻灯片处于活动状态,我希望第二个按钮让课程"有效".当您移动到第三张幻灯片时(通过单击第三个按钮或滑动屏幕),类"活动"将从第二个按钮中删除并添加到第三个按钮.

这是我的代码:

menu.html

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

    <ion-content class="padding">

        <ion-slide-box on-slide-changed="activateTabs($index)">

            <ion-slide>
                <h1> Slide 1 </h1>
            </ion-slide>

            <ion-slide>
                <h1> Slide 2 </h1>
            </ion-slide>

            <ion-slide>
                <h1> Slide 3 </h1>
            </ion-slide>

            <ion-slide>
                <h1> Slide 4 </h1>
            </ion-slide>

        </ion-slide-box>

    </ion-content>

    <div class="button-bar">
        <a class="button button-stable" ng-click="slide(0)">1</a>
        <a class="button button-stable" ng-click="slide(1)">2</a>
        <a class="button button-stable" ng-click="slide(2)">3</a>
        <a class="button button-stable" ng-click="slide(3)">4</a>
    </div>

</ion-view>

MenuCtrl.js

myApp

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

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

});

Answer 1

您可以通过在控制器中定义按钮来实现此目的,这样您就可以使用$index有条件地将类添加到对象中ng-class.

你的代码就像这样.

HTML

添加ng-repeat和ng-class在HTML.

单击某个按钮时,$ scope.current将与该特定按钮按钮的$ index相同.因此,ng-class只会将类添加active到单击的按钮.

<div class="button-bar">
    <a ng-repeat="button in buttons"
       ng-class="{'active': $index === current}"
       ng-click="slide($index)"
       class="button button-stable">{{ button.name }}</a>
</div>

调节器

$scope.buttons 在控制器内部定义按钮.

myApp

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

    $scope.buttons = [
        { name: '1' },
        { name: '2' },
        { name: '3' },
        { name: '4' }
    ];

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

});

CSS

现在你需要.active在你的css中定义一个类,因为我们在你的html中使用ng-class指令('active')声明了它.

ng-class="{'active': $index === current}"