AngularJS - 转到上一个/下一个模式

我正在使用 Angular 构建一个应用程序，其中有一个项目列表（使用 ng-repeat），通过单击每个项目，我可以打开一个模式以查看更详细的描述。

现在，为了切换到另一个模式，我必须关闭前一个模式，转到列表，然后单击打开另一个模式。我想在单击上一个/下一个按钮时直接进入上一个/下一个模式。我举了一个例子来说明我想要实现的目标。

这是 HTML：

<div ng-app="myApp" ng-controller="myCtrl">
   <ul>
       <li ng-repeat="t in turtles">
          {{t.name}} - {{t.weapon}} 
          <a ng-click="show = !show">Show more</a>
          <div class="modal" ng-show="show">
              <div class="close" ng-click="show = !show">X</div>
              {{t.name}} likes to eat {{t.food}} with his {{t.weapon}}!
              <div class="previous">Previous</div>
              <div class="next">Next</div>
          </div>
       </li>
   </ul>
</div>

和控制器：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.turtles = [
        { name: "Michellangelo", weapon: "nunchaku", food:"pizza" },
        { name: "Donatello", weapon: "bo", food:"pizza" },
        { name: "Leonardo", weapon: "katana", food:"turtle soup" },
        { name: "Rafael", weapon: "sai", food:"pizza" } 
    ];
    $scope.show=false;
});

你可以看到一个正在运行的 Jsfiddlehere http://jsfiddle.net/Joe82/s7gc81zz/

这是一个可行的解决方案：http://jsfiddle.net/s7gc81zz/5/ http://jsfiddle.net/s7gc81zz/5/

您可以为每个海龟添加一个 show 属性，并使用$indexngRepeat 变量来引用您在数组中的位置：

<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="t in turtles">
        {{t.name}} - {{t.weapon}} 
        <a ng-click="showMore(t)">Show more</a>
        <div class="modal" ng-show="t.show">
            <div class="close" ng-click="hideMore(t)">X</div>
            {{t.name}} likes to eat {{t.food}} with his {{t.weapon}}!
            <div class="previous" ng-click="showPrevious(t, $index)>Previous</div>
            <div class="next" ng-click="showNext(t, $index)">Next</div>
        </div>
    </li>
  </ul>
</div>

现在您使用作用域函数来处理下一个按钮的逻辑：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.turtles = [
        { name: "Michellangelo", weapon: "nunchaku", food:"pizza" },
        { name: "Donatello", weapon: "bo", food:"pizza" },
        { name: "Leonardo", weapon: "katana", food:"turtle soup" },
        { name: "Rafael", weapon: "sai", food:"pizza" } 
    ];
    //$scope.show=false;
    $scope.showMore = function(turtle) {
        turtle.show = true;
    };
    $scope.hideMore = function(turtle) {
        turtle.show = false;
    };
    $scope.showNext = function(turtle, index) {
      if((index+1) > ($scope.turtles.length - 1)) {
        return;
      }
      else {
        turtle.show = false;
        $scope.turtles[index+1].show = true;
      }

    };
    $scope.showPrevious = function(turtle, index) {
      if((index-1) < 0) {
        return;
      }
      else {
        turtle.show = false;
        $scope.turtles[index-1].show = true;
      }
    };
});