我有一堆用 ng-repeat 创建的 Div。 <强> Plunker
快速图像:
是否可以像 slider 一样创建此堆栈 div 作品?喜欢:
- 如果我按下 Next 按钮,Top div 将滑开,第二个 top 将显示。
- 按 Previous 按钮将显示上一个 div(如果有)。
代码:
<div class="col-md-2-4"
ng-repeat="card in cards"
ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
<ul class="list-unstyled cs-tag-item-grp">
<li class="clearfix" ng-repeat="value in card.cardItem">
<div class="pull-left">
{{value.keys}}
</div>
</li>
</ul>
<div class="keys">
<button type="button" class="btn btn-pre">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
如果可能的话,这对我真的很有帮助。
最佳答案
好的,这很有趣。这是你如何做到的。通过单击按钮,我们可以计算新顶牌的索引。任何索引低于新计算的索引都应该被隐藏。为了用漂亮的动画隐藏卡片,最好使用具有任意转换规则的 CSS 类。
结果 HTML 看起来像这样:
<div class="col-md-2-4"
ng-class="{'card-hide': index > $index + 1}"
ng-repeat="card in cards"
ng-style="{left: 2 * $index + 'px', top: 2 * $index + 'px', 'z-index': (cards.length - $index)}">
<ul class="list-unstyled cs-tag-item-grp">
<li class="clearfix" ng-repeat="value in card.cardItem">
<div class="pull-left">
{{value.keys}}
</div>
</li>
</ul>
</div>
<div class="keys">
<button type="button" class="btn btn-next" ng-click="index = index < cards.length ? index + 1 : cards.length">Next</button>
<button type="button" class="btn btn-pre" ng-click="index = index > 1 ? index - 1 : 1">Previous</button>
</div>
其中起始索引在 Controller 中定义为:
$scope.index = 1;
滑动/淡入淡出效果由非常简单的 CSS 规则处理:
.card-hide {
left: -100px !important;
opacity: 0 !important;
}
关于javascript - angularjs 单击按钮显示下一个/上一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29564383/