帶按鈕欄的離子滑動盒

Question

我有一個帶 4 張幻燈片的離子幻燈片盒。 您可以通過單擊屏幕底部的按鈕在幻燈片之間切換。 當相應的幻燈片處於活動狀態時，如何將類“活動”（使用 AngularJS）添加到按鈕？

例如，如果第二張幻燈片處於活動狀態，我希望第二個按鈕具有“活動”類。 當您移動到第三張幻燈片時（通過單擊第三個按鈕或通過滑動屏幕），類 'active' 將從第二個按鈕中刪除並添加到第三個按鈕。

這是我的代碼：

菜單.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>

菜單控件.js

myApp

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

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

});

Answer 1

您可以通過在控制器中定義按鈕來實現這一點，因此您可以使用$index有條件地將一個類添加到具有ng-class的對象中。

你的代碼看起來像這樣。

HTML

在你的 html 中添加ng-repeat和ng-class 。

當您單擊一個按鈕時， $scope.current 將與該特定按鈕按鈕的 $index 相同。 因此ng-class只會將active ng-class添加到單擊的按鈕。

<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

現在您需要在您的 css 中的某處定義一個類.active ，因為我們在您的 html 中使用ng-class指令（'active'）聲明了它。

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