Ng tekrarında son eleman için farklı sınıf

152

Böyle bir şey ng-tekrar kullanarak bir liste oluşturuyorum

  <div ng-repeat="file in files">
   {{file.name}}
   </div>

Ama sadece son element <div class="last">test</div>için ona bir sınıf ( ) eklemek istiyorum. ng-repeat kullanarak bunu nasıl başarabilirim?

angularjs

— Rahul
kaynak

son 2 saatte aynı takıldı :)

— Anshul

241

Yönerge $lastiçinde değişken kullanabilirsiniz ng-repeat. Bir göz atın doc .

Bunu şu şekilde yapabilirsiniz:

 <div ng-repeat="file in files" ng-class="computeCssClass($last)">
 {{file.name}}
 </div>

computeCssClassİşlevi controllertek argüman alan ve 'last'veya döndüren nerede null.

Veya

  <div ng-repeat="file in files" ng-class="{'last':$last}">
  {{file.name}}
  </div>

— Paul Brit
kaynak

1

Ben daha önce bir göz vardı ama tam olarak $ son kullanmak nasıl anlayamadık ... orada da çok fazla örnek yok.

— Rahul

@Rahul, cevabı güncelledim. Neden bahsettiğimi anlıyor musun?

— Paul Brit

8

evet .. Ben de google gruplarından başka bir cevap aldım <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— Rahul

1

@Rahul, sanırım cevabın benden daha iyi.

— Paul Brit

@Rahul, ne yazık ki benim için çalışıyor. Geliştirici konsolunda neler var?

— Paul Brit

23

CSS ile yapmak daha kolay ve daha temiz.

HTML:

<div ng-repeat="file in files" class="file">
  {{ file.name }}
</div>

CSS:

.file:last-of-type {
    color: #800;
}

:last-of-typeSeçici şu anda tarayıcıların% 98 tarafından desteklenmektedir

— Aidan
kaynak

3

👌 CSS şekilde angularjs için Çözüm

— Mo

1

Not: Bunu ng-repeatizlediğinde çalışmaz <div class="file"></div>ve varolan .file div öğelerinin listesini ayırmak istersiniz .

— DerMike

1

@DerMike Bu durumda, onları sondan ayırmak için ng-repeatöğelere başka bir sınıf koyacaksınızdiv

— aidan

14

Paul'ün cevabını detaylandırmak için bu, şablon koduyla çakışan kontrolör mantığıdır.

// HTML
<div class="row" ng-repeat="thing in things">
  <div class="well" ng-class="isLast($last)">
      <p>Data-driven {{thing.name}}</p>
  </div>
</div>

// CSS
.last { /* Desired Styles */}

// Controller
$scope.isLast = function(check) {
    var cssClass = check ? 'last' : null;
    return cssClass;
};

Ayrıca, mümkünse bu çözümü gerçekten önlemeniz gerektiğini de belirtmek gerekir. Doğası gereği, CSS bunu halledebilir, JS tabanlı bir çözüm yapmak gereksizdir ve performans göstermez. Ne yazık ki IE8'i desteklemeniz gerekiyorsa> bu çözüm sizin için çalışmaz ( bkz. MDN destek belgeleri ).

Yalnızca CSS Çözümü

// Using the above example syntax
.row:last-of-type { /* Desired Style */ }

— Scott Kılıç
kaynak

Not: .ng-hide sınıfı son öğeye şu şekilde uygulanırsa yalnızca CSS çözümü çalışmaz: last-child öğenin ekranda işlenip işlenmediği, ancak kelimenin tam anlamıyla sonuncu olup olmadığı ile ilgilenmez işaretlemedeki kümenin içindeki öğe. fiddle.jshell.net/p5qe82w4/4

— Kerry Johnson

7

<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
   {{file.name}}
</div>

Bu benim için işe yarıyor! İyi şanslar!

— Fabian Perez
kaynak

Eğer son $ değilse, son için bir sınıfa sahiptir ve son elementin başka bir sınıfı vardır ...

— strwoc

2

Son öğeyi bulmak için limitToile birlikte filtre kullanabilirsiniz-1

Örnek :

<div ng-repeat="friend in friends | limitTo: -1">
    {{friend.name}}
</div>

— Nourein
kaynak

0

Fabian Perez'in verdiği cevap küçük bir değişiklikle benim için çalıştı

Düzenlenmiş html burada:

<div ng-repeat="file in files" ng-class="!$last ? 'other' : 'class-for-last'"> {{file.name}} </div>

— T. Naik
kaynak