Kelas berbeda untuk elemen terakhir dalam ng-repeat

152

Saya membuat daftar menggunakan ng-repeat sesuatu seperti ini

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

Tetapi untuk elemen terakhir saja saya ingin memiliki kelas ( <div class="last">test</div>) termasuk di dalamnya. bagaimana saya bisa mencapai ini menggunakan ng-repeat?

angularjs

— Rahul
sumber

macet sama sejak 2 jam terakhir :)

— Anshul

241

Anda dapat menggunakan $lastvariabel dalam ng-repeatarahan. Lihatlah doc .

Anda dapat melakukannya seperti ini:

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

Di mana computeCssClassfungsi controlleryang mengambil argumen tunggal dan mengembalikan 'last'atau null.

Atau

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

— Paul Brit
sumber

1

Saya telah melihat itu sebelumnya tetapi tidak tahu bagaimana tepatnya menggunakan $ last .. tidak ada banyak contoh di luar sana juga.

— Rahul

@Rahul, saya sudah memperbarui jawaban. Apakah Anda mengerti apa yang saya bicarakan?

— Paul Brit

8

ya .. Saya juga mendapat jawaban lain dari grup google <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— Rahul

1

@Rahul, saya kira, jawaban Anda lebih baik dari saya.

— Paul Brit

@Rahul, sungguh menyedihkan, itu bekerja untuk saya. Apa yang Anda miliki di konsol pengembang?

— Paul Brit

23

Lebih mudah dan lebih bersih untuk melakukannya dengan CSS.

HTML:

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

CSS:

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

The :last-of-typepemilih saat ini didukung oleh 98% dari browser

— bantu
sumber

3

Solusi untuk AngularJS dengan cara CSS 👌

— Mo.

1

NB: Ini tidak berfungsi ketika ng-repeatdiikuti oleh <div class="file"></div>, dan Anda ingin memisahkan daftar div .file yang ada .

— DerMike

1

@DerMike Dalam hal ini Anda akan menempatkan kelas lain pada ng-repeatelemen untuk membedakan mereka dari trailingdiv

— aidan

14

Untuk menguraikan jawaban Paul, ini adalah logika controller yang bertepatan dengan kode templat.

// 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;
};

Perlu juga dicatat bahwa Anda benar-benar harus menghindari solusi ini jika memungkinkan. Secara alami CSS dapat menangani hal ini, membuat solusi berbasis JS tidak perlu dan tidak memiliki kinerja. Sayangnya jika Anda perlu mendukung IE8> solusi ini tidak akan berfungsi untuk Anda ( lihat dokumen dukungan MDN ).

Solusi Khusus CSS

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

— Scott Sword
sumber

Catatan: Solusi khusus CSS tidak berfungsi jika kelas .ng-hide diterapkan pada elemen terakhir sebagai: last-child tidak peduli dengan apakah elemen tersebut ditampilkan di layar atau tidak, tetapi apakah itu benar-benar yang terakhir elemen dalam set di markup. fiddle.jshell.net/p5qe82w4/4

— Kerry Johnson

7

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

Itu berhasil untuk saya! Semoga berhasil!

— Fabian Perez
sumber

Jadi jika ini bukan $ last, ia memiliki class-for-last, dan elemen terakhir memiliki class lainnya ...

— strwoc

2

Anda dapat menggunakan limitTofilter dengan -1untuk menemukan elemen terakhir

Contoh :

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

— Nourein
sumber

0

Jawaban yang diberikan oleh Fabian Perez bekerja untuk saya, dengan sedikit perubahan

Html yang diedit ada di sini:

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

— T. Naik
sumber