angularjs - ng-repeat 下一个和上一个导航

Question

我正在寻找一种实现 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>

另外，如果有其他解决方法，请告知。

Answer 1

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"}];
}