AngularJS - Переход к предыдущему/следующему модальному

Question

Я создаю приложение с угловым, где у меня есть список элементов (с использованием 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; 
}); 

Вы можете увидеть рабочую Jsfiddle here

Answer 1

Вот рабочий раствор: http://jsfiddle.net/s7gc81zz/5/

Вместо того, чтобы полагаться на одну переменную, чтобы показать или скрыть модальности, вы можете добавить шоу атрибут каждой черепахе и использовать переменную $index ngRepeat для ссылки на ваше положение в массиве:

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

Answer 2

, как вы, возможно, уже заметили, нг-шоу просто добавить/удалить класс css. Поэтому, основываясь на этом, вы должны предоставить идентификатор своим DIV, возможно, используя внутренний индекс var $ из директивы ng-repeat, например id = "card - {{$ index}}". Определив ваши DIV и с помощью небольшой jquery справки (это также можно сделать с помощью простых js), вы можете идентифицировать активную карту, проверить ее идентификатор, рассчитать следующее или предыдущее значение ID и добавить или удалить какой-либо конкретный класс css, который вам нужен ,

Или вы можете просто посмотреть на угловую карусель;)

Answer 3

Если вы хотите создать навигацию в модальном из следующей и предыдущей кнопки, то вместо того, чтобы один показать флаг, вы должны иметь флаг на каждом объект отображения, т.е. черепах. И на основе текущего объекта цикла ng-repeat вы можете скрыть/показать соответствующий элемент на следующей и предыдущей кнопках на основе $ index +1 & -1 соответственно.

Здесь работает Fiddle Код: 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 4

Вы можете использовать переменный индекс для отслеживания ниндзи черепахи вы должны показать в настоящее время.

Кстати, вы создаете ненужную модель/всплывающее окно, потому что вам нужно только одно, и вам не нужна модель для каждой из черепах ниндзя :), так что лучше иметь только одно всплывающее окно модели.

Вы можете перейти к следующей и предыдущей черепахе ниндзя с помощью индексной переменной, которую вы будете хранить и соответствующим образом обновлять по объекту $ scope.

Проверьте код ниже, здесь обновленный jsfiddle

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