angularjs單擊按鈕顯示下一個/上一個div

Question

我有一堆用ng-repeat創建的Div。 Plunker

快速圖片：

有可能像滑塊一樣創建這個div工作堆棧嗎？ 喜歡：

• 如果按下“下一步”按鈕，頂部div將滑開，第二個頂部將顯示。
• 按上一個按鈕將顯示前一個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>

如果可能的話，它真的會幫助我。

Answer 1

好的，這很有趣。 這是你如何做到的。 通過單擊按鈕，可以計算新頂卡的索引。 索引低於新計算值的任何東西都應隱藏。 為了隱藏具有漂亮動畫的卡片，最好使用具有任意轉換規則的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>

其中起始索引在控制器中定義為：

$scope.index = 1;

幻燈片/淡入淡出效果由非常簡單的CSS規則處理：

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

演示： http ： //plnkr.co/edit/tLVJrpqavKbHvKzMljNG？p = preview