Другой класс для последнего элемента в ng-repeat

152

Я создаю список с помощью ng-repeat что-то вроде этого

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

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

angularjs Рахул
источник
застрял на том же самом из последних 2 часов :)
Anshul

Ответы:

241

Вы можете использовать $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>
Пол Брит
источник
1
Я посмотрел на это ранее, но не мог понять, как именно использовать $ last .. Там тоже не так много примеров.
Рахул
@Rahul, я обновил ответ. Ты понимаешь о чем я?
Пол Брит
8
да .. я также получил другой ответ от групп Google <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>
Рахул
1
@ Рахул, я думаю, твой ответ лучше моего.
Пол Брит
@Rahul, действительно, к сожалению, это работает для меня. Что у вас в консоли разработчика?
Пол Брит
23

Это проще и чище сделать с помощью 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
Решение для AngularJS в стиле CSS Mo
Пн
1
NB: Это не работает, когда ng-repeatследует <div class="file"><!-- dummy for creating new element --></div>, и вы хотели бы выделить список существующих .file divs .
DerMike
1
@DerMike В этом случае вы бы поместили другой класс в ng-repeatэлементы, чтобы отличать их от div
конечного
14

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

// 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 */ }
Скотт Меч
источник
Примечание: CSS-решение не работает, если к последнему элементу применяется класс .ng-hide: last-child не заботится о том, отображается ли элемент на экране или нет, но является ли он буквально последним элемент в наборе в разметке. fiddle.jshell.net/p5qe82w4/4
Керри Джонсон,
7 
<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
   {{file.name}}
</div>

Это подходит для меня! Удачи!

Фабиан Перес
источник
Так что, если это не $ last, у него есть класс для последнего, а у последнего элемента есть класс other ...
strwoc
2

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

Пример :

<div ng-repeat="friend in friends | limitTo: -1">
    {{friend.name}}
</div>
Nourein
источник
0

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

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

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

Т. Найк
источник