AngularJS - Go to previous / next modal

Question

I am creating an application with angular where I have a list of elements (using ng-repeat), and by clicking on each element, I can open the modal to see a more detailed description.

Right now, to switch to another modal, I need 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 pressing the previous / next button. I 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 the 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 modals, you can add a show attribute to each turtle and use the $index ngRepeat variable 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 the scope functions to process 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 navigation in modal form from the following and previous buttons, instead of having one show flag, you should have a flag for each object of the displayed array ie turtles. And based on the current ng-repeat loop object, you can hide / show the corresponding element on the next and previous buttons based on $ index +1 and -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> 

Answer 3

You can use the index variable to track the ninja turtle that you must currently show.

By the way, you are creating an unnecessary model / popup because you only need one, and you do not need a model for each of the ninja turtles :), so it is better to have only one model popup.

You can go to the next and previous ninja turtles using an index variable that you will store and update accordingly with the $ scope object.

Check below code, updated jsfiddle here

 <div ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="t in turtles"> {{t.name}} - {{t.weapon}} <a ng-click="showPopup($index)">Show more</a> </li> </ul> <div class="modal" ng-show="show"> <div class="close" ng-click="closePopup()">X</div> {{selectedTurtle.name}} likes to eat {{selectedTurtle.food}} with his {{selectedTurtle.weapon}}! <div class="previous" ng-click="prev()">Previous</div> <div class="next" ng-click="next()">Next</div> </div> </div> angular .module('myApp', []) .controller('myCtrl', ['$scope', function ($scope) { $scope.index = 0; $scope.selectedTurtle = {}; $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.showPopup = showPopup; $scope.closePopup = closePopup; $scope.next = next; $scope.prev = prev; function setTurtle(index) { $scope.selectedTurtle = $scope.turtles[index]; } function showPopup(index) { $scope.index = index; setTurtle($scope.index); $scope.show = true; } function closePopup() { $scope.show = false; } function next() { if ($scope.index !== $scope.turtles.length - 1) { $scope.index++; setTurtle($scope.index); } } function prev() { if ($scope.index !== 0) { $scope.index--; setTurtle($scope.index); } } }]); 

Answer 4

As you already noticed, ng-show just adds / removes the css class. Therefore, based on this, you should provide an identifier for your DIV, possibly using the internal index var $ from the ng-repeat directive, for example id = "card - {{$ index}}". Having defined your DIVs and using a little jquery help (this can also be done using simple js), you can identify the active map, check its identifier, calculate the next or previous ID value and add or remove any specific css class that you need .

Or you can just look for an angular carousel;)