angularjs点击按钮，显示下/ previous格 [英] angularjs Click button to show next / previous div

问题描述

我有NG重复创建div的堆栈。 Plunker

I have a stack of Divs created with ng-repeat. Plunker

快速图像：

是否有可能创造这个栈DIV的工作就像一个滑盖的？这样的：

Is it possible to create this stack of div work like a slider? Like:

• 如果我preSS下一步按钮，顶部的div会滑动，距离第二顶部将显示。


• pressing previous按钮将显示previous格，如果有任何。

code：

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

这将真正帮助我，如果这是可能的。

It will really help me if this is possible.

推荐答案

好吧，这很有趣。这里是你如何能做到这一点。通过点击按钮，可以让计算新的顶级显卡的索引。任何与指数走低，然后新的计算应该被隐藏。为了掩盖卡与漂亮的动画，这是最佳的使用CSS类任意转换规则。

Okay, this is fun. Here is how you can do it. By clicking buttons lets calculate the index of the new top card. Anything with the index lower then new calculated one should be hidden. In order to hide card with nice animations it's optimal to use CSS classes with arbitrary transition rules.

由于HTML结果会是这个样子：

As the result HTML will look something like this:

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

在这里开始指数控制器的定义是：

where starting index is defined in controller as:

$scope.index = 1;

幻灯片/淡入淡出效果是通过非常简单的CSS规则处理：

Slide/fade effect is handled by very simple CSS rule:

.card-hide {
    left: -100px !important;
    opacity: 0 !important;
}

演示： http://plnkr.co/编辑/ tLVJrpqavKbHvKzMljNG？p = preVIEW

这篇关于angularjs点击按钮，显示下/ previous格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！