ng-repeatの最後の要素にディレクティブを追加し、それをngAnimateでアニメーション化します。

Question

角度付きのディレクティブ内にリストを構築するときに問題があります。私は配列にページを追加し、それらをng-repeatを通してサイトに表示します。私はサイトに来る最後のページをアニメートしたいが、最後の要素だけに別のディレクティブを追加したい場合は複雑になる。

私はPlunkerで達成しようとしているものの、この単純なデモ建て：これは、ページを表示するための私のテンプレートである DEMO

を：

<div> 
    <button ng-click='addPage()'>Add</button> 
    <div class='page' ng-repeat="page in pages track by $index"> 
     <div ng-if='!$last' class="page">{{page.content}}</div> 
     <div ng-if='$last' class="page" page-offset>{{page.content}}</div> 
    </div> 
</div> 

問題は、それは常に最後をアニメーション化していることです2つの要素（新しい要素を追加した後に両方の要素が変更されるため）。最後の要素にディレクティブを追加し、最後の要素のみをアニメートしたいと思います。

これを解決して動作させる方法についてアドバイスをいただければ幸いです！事前にお手伝いいただきありがとうございます。

EDIT：

それは私が（私は.contentする.PAGEを改称）ディレクティブのテンプレートで使用されるCSSクラスとの問題でした。私はplunkerを更新しました。今はすべてがうまくいくはずです:)すべての年と私はまだそれらの 'noob'間違いを時々通過することができません：D

Answer 1

page-offsetディレクティブをクラスに変更することができますタイプ。下記のようなものです。

angular.module('yourModule', []) 
.directive('pageOffset', function() { 
    return { 
    restrict: 'C', // It will restrict your directive to a class 
    templateUrl: 'page-offset.html' 
    }; 
}); 

その後で、あなたのng-repeatあなたは条件付きでそれが最後の要素だかどうかをチェックすることにより、ng-attr-classを使用してクラスを適用することができます。ここでは、「page page-offset」クラスが最後の要素に適用され、「page」クラスだけが他の要素に適用されます。

<div> 
    <button ng-click='addPage()'>Add page</button> 
    <div class='page' ng-repeat="page in pages track by $index"> 
     <div ng-attr-class="{{$last && 'page page-offset' || 'page'}}">{{page.content}}</div> 
    </div> 
</div> 

ここでは、plunkrが更新されています。