AngularJSで配列を配列してCSSクラスをアクティブにする

Question

ハートビートCSSアニメーションを有効にする6つのdivがありますが、シーケンスでこれを行いたいと思います。

self.generatedSequence = [0,3,5,3]; 

配列内の各アイテムは、ハートビート機能を受信するDIVの位置を意味する：

は、例えば、私は配列を有しています。私は順序でどの位置にあるハートビートアニメーションを有効にするには、コントローラを使用しようとしている

<div class="grid-cell" 
    ng-class="{'heartbeat': $ctrl.isActive 
    }" 
></div> 

：

各ダイビングAngularJsからUIコンポーネントです。 はだから例で

• ような位置0の意志であろう位置3意志が位置0
• 後1秒かかり
• 1Sかかり位置5意志が位置3
• 後に1秒を要します位置3は位置5の1秒後に表示されます。

すべてのアニメーションには4秒かかります。

私は$ timeoutを使ってそれを試みましたが、同時に両方を実行しました。

https://codepen.io/guifeliper/pen/pwdKKj

Answer 1

あなたは$timeoutは一度だけ実行されるため$interval、ない$timeoutを使用します。このような

$ctrl.stopInterval = $interval(function() { 
    $ctrl.heartbeatId = $ctrl.generatedSequence.shift(); 

    // be sure to clean up afterwards 
    if($ctrl.generatedSequence.length == 0) { 
    $interval.cancel($ctrl.stopInterval); 
    } 

}, 1000); 

そして、あなたのグリッドセルに変更ng-classディレクティブ：

<div class="grid-cell" ng-repeat="grid in $ctrl.gridBox" 
    ng-class="{'heartbeat': $ctrl.heartbeatId == grid }"></div> 

https://codepen.io/jdoyle/pen/xrPJwW