คลาสที่แตกต่างกันสำหรับองค์ประกอบสุดท้ายใน ng-repeat

ฉันกำลังสร้างรายการโดยใช้ซ้ำสิ่งเช่นนี้

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

แต่สำหรับองค์ประกอบสุดท้ายเพียงอย่างเดียวฉันต้องการให้มีคลาส ( <div class="last">test</div>) รวมอยู่ด้วย ฉันจะบรรลุสิ่งนี้ได้อย่างไรโดยใช้ ng-repeat?

คุณสามารถใช้$lastตัวแปรภายในng-repeatคำสั่ง ลองดูที่เอกสาร

คุณสามารถทำได้เช่นนี้:

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

ไหนcomputeCssClassฟังก์ชั่นของการเป็นcontrollerซึ่งจะมีการโต้แย้ง แต่เพียงผู้เดียวและผลตอบแทนหรือ'last'null

หรือ

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

ง่ายและสะอาดกว่าด้วย CSS

HTML:

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

CSS:

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

:last-of-typeเลือกได้รับการสนับสนุนในขณะนี้โดย 98% ของเบราว์เซอร์

เพื่ออธิบายรายละเอียดเกี่ยวกับคำตอบของ Paul นี่คือตรรกะของตัวควบคุมที่เกิดขึ้นพร้อมกับรหัสเทมเพลต

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

นอกจากนี้ยังเป็นที่น่าสังเกตว่าคุณควรหลีกเลี่ยงโซลูชันนี้หากเป็นไปได้ โดยธรรมชาติ CSS สามารถจัดการกับสิ่งนี้ได้ทำให้การแก้ปัญหาแบบ JS นั้นไม่จำเป็นและไม่ได้มีประสิทธิภาพ น่าเสียดายถ้าคุณต้องการสนับสนุน IE8> วิธีนี้จะไม่ทำงานสำหรับคุณ ( ดูเอกสารสนับสนุน MDN )

โซลูชัน CSS เท่านั้น

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

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

นั่นเหมาะกับฉัน! โชคดี!

คุณสามารถใช้limitToตัวกรอง-1เพื่อค้นหาองค์ประกอบสุดท้าย

ตัวอย่าง :

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

คำตอบที่ได้รับจาก Fabian Perez ทำให้ฉันด้วยการเปลี่ยนแปลงเล็กน้อย

html ที่แก้ไขอยู่ที่นี่:

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