Lớp khác nhau cho phần tử cuối cùng trong ng-repeat

Tôi đang tạo một danh sách bằng cách sử dụng ng-repeat một cái gì đó như thế này

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

Nhưng đối với phần tử cuối cùng, tôi muốn có một lớp ( <div class="last">test</div>) đi kèm với nó. Làm thế nào tôi có thể đạt được điều này bằng cách sử dụng ng-repeat?

Bạn có thể sử dụng $lastbiến trong ng-repeatchỉ thị. Hãy xem tài liệu .

Bạn có thể làm như thế này:

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

Trường hợp computeCssClasschức năng trong controllerđó có đối số duy nhất và trả về 'last'hoặc null.

Hoặc là

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

Làm điều đó dễ dàng và sạch sẽ hơn với CSS.

HTML:

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

CSS:

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

Bộ :last-of-typechọn hiện được 98% trình duyệt hỗ trợ

Để giải thích câu trả lời của Paul, đây là logic của bộ điều khiển trùng với mã mẫu.

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

Cũng đáng lưu ý rằng bạn thực sự nên tránh giải pháp này nếu có thể. Về bản chất, CSS có thể xử lý việc này, làm cho một giải pháp dựa trên JS là không cần thiết và không hiệu quả. Thật không may nếu bạn cần hỗ trợ IE8> giải pháp này sẽ không hiệu quả với bạn ( xem tài liệu hỗ trợ MDN ).

Giải pháp chỉ 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>

Nó ổn với tôi! Chúc may mắn!

Bạn có thể sử dụng limitTobộ lọc -1để tìm phần tử cuối cùng

Ví dụ :

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

Câu trả lời được đưa ra bởi Fabian Perez đã làm việc cho tôi, với một chút thay đổi

Đã chỉnh sửa html tại đây:

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