{{file.name}} </div> Но для самого последнего элемента я хотел бы включить в него класс ( <div class = "last"> test"> {{file.name}} </div> Но для самого последнего элемента я хотел бы включить в него класс ( <div class = "last"> test"> {{file.name}} </div> Но для самого последнего элемента я хотел бы включить в него класс ( <div class = "last"> test" />

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

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

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

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

140
nl ja de
застрял на том же самом за последние 2 часа :)
добавлено автор Anshul, источник

4 ответы

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

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

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

Где computeCssClass является функцией контроллера , которая принимает единственный аргумент и возвращает 'last' или null .

Или

  <div ng-repeat="file in files" ng-class="{'last':$last}">
  {{file.name}}
  </div>
221
добавлено
я посмотрел на это раньше, но не мог понять, как именно использовать $ last .. примеров там тоже мало.
добавлено автор Rahul, источник
да .. Я также получил еще один ответ из групп Google <div ng-repeat = "в файлах" ng-class = "{last: $ last}"> {{file.name}} </div>
добавлено автор Rahul, источник
к сожалению, первый не работал для меня.
добавлено автор Rahul, источник
ничего .. не было никаких ошибок, но класс не был включен для div.
добавлено автор Rahul, источник
Я, должно быть, ошибся ... Спасибо за помощь.
добавлено автор Rahul, источник
У кого-нибудь есть идеи относительно того, почему $ first и $ last всегда возвращают мои элементы списка как истинные, однако $ index и $ mid работают для меня? Я использую как этот ng-class = "{first: $ first = true, last: $ last = true}" TY редактировать oops фактически устанавливал значение с помощью =, а не == :)
добавлено автор landed, источник
@Rahul, я обновил ответ. Вы понимаете, о чем я говорю?
добавлено автор Paul Chechetin , источник
@Rahul, я думаю, ваш ответ лучше моего.
добавлено автор Paul Chechetin , источник
@Rahul, действительно, к сожалению, это работает для меня. Что у вас есть в консоли разработчика?
добавлено автор Paul Chechetin , источник
@Rahul, вот доказательство plnkr.co/edit/a0wwUfNroufvpeeUQ8S6
добавлено автор Paul Chechetin , источник
@Rahul, добро пожаловать
добавлено автор Paul Chechetin , источник
Поиск «как» на этой методологии я наткнулся на этот вопрос, и этот ответ был именно тем, что мне нужно! Спасибо!
добавлено автор PKD, источник

С CSS проще и чище.

HTML:

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

CSS:

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

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

20
добавлено

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

// HTML
<div class="row" ng-repeat="thing in things">
  <div class="well" ng-class="isLast($last)">
      

Data-driven {{thing.name}}

</div> </div> // CSS .last { /* Desired Styles */} // Controller $scope.isLast = function(check) { var cssClass = check ? 'last' : null; return cssClass; };

Its also worth noting that you really should avoid this solution if possible. By nature CSS can handle this, making a JS-based solution is unnecessary and non-performant. Unfortunately if you need to support IE8> this solution won't work for you (see MDN support docs).

Решение только для CSS

// Using the above example syntax
.row:last-of-type { /* Desired Style */ }
13
добавлено
Примечание. Решение только с CSS не работает, если на последнем элементе применяется класс .ng-hide, поскольку: last-child не относится к тому, отображается ли элемент на экране или нет, но является ли это буквально последним элемент внутри набора в разметке. fiddle.jshell.net/p5qe82w4/4
добавлено автор Kerry Johnson, источник
<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
   {{file.name}}
</div>

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

8
добавлено
Angular — русскоговорящее сообщество
Angular — русскоговорящее сообщество
3 960 участник(ов)

Общаемся на темы Angular 4+, его экосистемы, TypeScript, NativeScript и т.д. По вопросам SSR, Angular Universal @angular_universal_ru См. также: @typescript_ru, @react_js, @nodejs_ru, @js_ru Вакансии и поиск работы: @javascript_jobs

Angular.js (1.x) — русскоговорящее сообщество
Angular.js (1.x) — русскоговорящее сообщество
704 участник(ов)

Общаемся и обсуждаем темы, посвященные Angular 1.x и экосистеме.

AngularJS, Javascript
AngularJS, Javascript
370 участник(ов)

Angularjs russian chat