javascript - 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);

然后在 View 中，您可以为按钮的当前索引添加 1 或减 1。我还使用了 ng-show 绑定(bind)，这样如果没有下一篇文章，按钮就不会显示。您需要将数组替换为包含文章的数组变量。

<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>