Другой класс для последнего элемента в 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"></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>

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