AngularJS - Go to previous/next modal

Question

I am building an application with angular where I have a list of items (using ng-repeat), and by clicking on each item I can open a modal in order to see a more detailed description.

Right now in order to switch to another modal I have to close the previous one, go to the list, and click to open another modal. I would like to go directly to the previous/next modal when clicking the previous/next button. I have made an example of what I want to achieve.

Here is the 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>

And the controller:

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

You can see a working Jsfiddle here

Answer 1

Here is a working solution: http://jsfiddle.net/s7gc81zz/5/

Instead of relying on a single variable to show or hide the modals, you can add a show attribute to each turtle, and use the $index variable of ngRepeat to reference your position in the array:

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

Now you use scope functions to handle the logic of the next button:

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

Answer 2

If you want to create a navigation in the modal from next and previous buttons, then instead of having one show flag, you should have a flag on each object of the displaying array i.e turtles. And based on current looping object of ng-repeat you can then hide/ show appropriate item on next and previous buttons based on $index +1 & -1 respectively.

Here is the working Fiddle Code : http://jsfiddle.net/ashwani121/4fa6a9pr/

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;
var prevObj = null;
$scope.showModal = function(obj){
    if(prevObj && prevObj.selected)
  {
    prevObj.selected = false;
  }
    obj['selected'] = true;
  prevObj = obj;
}

$scope.navModal = function(index){
if(index > 0 && index < $scope.turtles.length)
    $scope.showModal($scope.turtles[index]);
}
});

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