Разный класс для последнего элемента в ng-repeat

Я создаю список, используя ng-repeat что-то вроде этого

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

Но для самого последнего элемента я хотел бы включить в него класс (<div class="last">test</div>). как я могу достичь этого, используя ng-repeat?

Ответы

Ответ 1

Вы можете использовать переменную $last в директиве ng-repeat. Посмотрите doc.

Вы можете сделать это следующим образом:

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

Ответ 2

Это проще и чище сделать это с помощью CSS.

HTML:

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

CSS

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

Селектор :last-of-type в настоящее время поддерживается 98% браузеров

Ответ 3

Чтобы разработать ответ Павла, это логика контроллера, которая совпадает с кодом шаблона.

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

Ответ 4

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

Это работает для меня! Удачи!

Ответ 5

Ответ, данный Фабианом Пересом, работал у меня с небольшим изменением

Отредактированный html находится здесь:

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

Ответ 6

Вы можете использовать фильтр limitTo с -1 для поиска последнего элемента

Пример:

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