angularjs Click button to show next / previous div

Question

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

Quick Image:

Answer 1

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.

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;

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

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

Demo: http://plnkr.co/edit/tLVJrpqavKbHvKzMljNG?p=preview