AngularJS-转到上一个/下一个模态 [英] AngularJS - Go to previous/next modal
问题描述
我正在构建一个带有角度的应用程序,其中有一个项目列表(使用ng-repeat),通过单击每个项目,我可以打开一个模式以查看更详细的描述.
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.
这是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;
});
您可以在此处
推荐答案
这是一个可行的解决方案: http://jsfiddle.net/s7gc81zz/5/
Here is a working solution: http://jsfiddle.net/s7gc81zz/5/
您可以不依赖单个变量来显示或隐藏模态,而是可以向每个乌龟添加show属性,并使用ngRepeat的$index
变量来引用您在数组中的位置:
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;
}
};
});
这篇关于AngularJS-转到上一个/下一个模态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!