1

ng-repeat next-prevous ナビゲーションを実装する方法を探しています。ナビゲーションは繰り返し領域内にあるため、次または前のアイテムが存在する場合はナビゲーション矢印が表示されます。

しかし、ng-clickでアクティブクラスをリピーターに追加する方法が必要なので、次のアイテムに移動すると、アクティブクラスを受け取り(前と同じ)、そのアイテムを表示し、他のすべてを非表示にすることができます。

<li ng-class="{active: ?}" ng-repeat="page in pages">
  <p ng-bind-html-unsafe="page.content"></p>
  <a ng-show="pages[$index - 1]" ng-click="?" class="previous" href="#">Previous</a>
  <a ng-show="pages[$index + 1]" ng-click="?" class="next" href="#">Next</a>                                          
</li>

また、これを回避する方法があればアドバイスをお願いします。

4

1 に答える 1

3

HTML:

<div ng-controller="MyCtrl">
    <li ng-class="{active: activePage.page == $index, 
    inactive: activePage.page != $index}" ng-repeat="page in pages">
        <p ng-bind-html-unsafe="page.content"></p>
        <a ng-show="pages[$index - 1]" ng-click="activePage.page = $index-1" 
        class="previous" href="#">Previous</a>
        <a ng-show="pages[$index + 1]" ng-click="activePage.page = $index+1" 
        class="next" href="#">Next</a>                                          
    </li>
</div>

CSS:

.active{
    display:block;
}

.inactive{
    display:none;
}

JS:

function MyCtrl($scope, $rootScope) {
    /* Dont use a primitive but an object as ng-repeat creates 
       a scope of its own */
    $scope.activePage = {
        page:0
    };
    $scope.pages = [{content:"a"},{content:"b"},{content:"c"}];
}
于 2013-08-13T13:11:09.737 に答える