ng-repeat öğesindeki son öğeye bir yönerge ekleyerek ve ardından ngAnimate

Question

ile etkinleştirin

Angular içindeki bir listeyi oluştururken Angular ile belirli bir sorun yaşıyorum. Diziye sayfa ekliyorum ve siteyi ng-repeat ile görüntüliyorum. Siteye gelen son sayfayı canlandırmak istiyorum, ancak sadece son öğeye başka bir yönerge eklemek istediğimde işler karmaşıklaşıyor.

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

sorun her zaman son animates şudur: Bu görüntüleyen sayfalar için benim şablon DEMO

geçerli:

ben Plunker başarmaya çalışıyorum ne bu basit demo inşa iki eleman (çünkü yenisini ekledikten sonra her ikisini de değiştirir). Direktifi sonuncuya eklemek ve sadece son elemanı canlandırmak istiyorum.

Bunu nasıl çözeceğiniz ve işinize yarayacağı hakkında herhangi bir tavsiye çok takdir edilecektir! Yardımlarınız için şimdiden teşekkür ederim.

DÜZENLEME:

Ben yönerge şablonunda (ı .content için .page değiştirildi) kullanılan css sınıfları ile ilgili bir sorun oldu. plunker'u güncelledim ve şimdi her şey gerektiği gibi çalışıyor :) Tüm bu yıllar boyunca ve hala 'noob' hatalarını zaman zaman geçemiyorum: D

Answer 1

page-offset yönergesini bir sınıfa değiştirebilirsiniz yazın. Aşağıda gösterildiği gibi bir şey.

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

Sonra içinde senin ng-repeat koşullu son eleman olsun denetleyerek ng-attr-class kullanarak sınıfını uygulayabilirsiniz. Burada son sayfaya 'page page-offset' sınıfı uygulanacak ve diğer elemanlara sadece 'page' sınıfı uygulanacak.

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

İşte güncellenen plunkr olduğunu.