使用下一个/上一个按钮的angularJS递增/递减当前路线

Question

我有这个矮人： http ://plnkr.co/edit/342MvXDwWG7RlIxB0JB1?p=preview

我需要使用“上一个”和“下一个”按钮来切换到下一个或上一个路线索引。 例如，在页面上将第article / 0条路由时，您可以单击“下一步”，然后页面将路由到并显示article / 1。 有人可以帮忙吗？

JavaScript的：

FeedApp.controller("ArticlesCtrl", ["$scope", "$routeParams", '$http',
  function($scope, $routeParams, $http) {
    var index = $routeParams.articleId;
    console.log(index);

    $scope.article = {};

    $http.get('news-html.json')
    .success(function(data) {
      $scope.news.push(data);
      $scope.article = $scope.news[0].entries[index];
    });
  }
]);

FeedApp.config(function($routeProvider) {
  $routeProvider

 .when("/", {
   controller: "NewsCtrl",
   templateUrl: "home.html"
 })

  .when("/article/:articleId", {
   controller: "ArticlesCtrl",
   templateUrl: "article.html"
 })

 .otherwise({
   redirectTo: "/"
 });


});

带有按钮的页面的html：

<div id="buttons">
  <a href="#/"><button>Back</button></a>
  <a href="#/??"><button id="prev">Prev</button></a>
  <a href="#/??"><button id="next">Next</button></a>
</div>

<h2>{{article.title}}</h2>

<div ng-bind-html="article.content | trustHTML"></div>

Answer 1

我试图使其正常运行，但我不太了解您的数据结构。

您可以在当前索引中为上一个和下一个按钮添加1或减1：

首先，您需要将当前索引转换为int并将其添加到范围：

$scope.index = parseInt($routeParams.articleId);

然后，您可以在视图中为按钮的当前索引加1或减1。 我还使用了ng-show绑定，因此如果没有下一篇文章，则按钮不会显示。 您将需要用包含文章的数组变量替换array。

<a href="#/acticle/{{index - 1}}" ng-show="index > 0"><button id="prev">Prev</button></a>
<a href="#/acticle/{{index + 1}}" ng-show="index < news[0].length-1"><button id="next">Next</button></a>