Різний клас для останнього елемента в ng-повторі

152

Я створюю список, використовуючи ng-повторення щось подібне

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

Але тільки для останнього елемента я хотів би, щоб до нього був <div class="last">test</div>включений клас ( ). як я можу досягти цього за допомогою ng-повтору?

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

так .. Я також отримав ще одну відповідь від гугл груп <div ng-repeat="file in files" ng-class="{last: $last}"> {{file.name}} </div>

— Рахул

1

@Rahul, я думаю, ваша відповідь краща за мою.

— Пол Брит

@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 шляху 👌

— штат Міссурі

1

Примітка: Це не працює, якщо ng-repeatслідує <div class="file"></div>, і ви хочете розставити список існуючих .файлів .

— DerMike

1

@DerMike У цьому випадку ви покладете ще один клас на ng-repeatелементи, щоб відрізнити їх від задніхdiv

— helpan

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-hid клас застосовується до останнього елемента як: last-child не стосується себе, чи елемент відображається на екрані чи ні, але чи буквально він останній елемент у межах набору в розмітці. fiddle.jshell.net/p5qe82w4/4

— Керрі Джонсон

7

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

Це працює для мене! Удачі!

— Фабіан Перез
джерело

Тож якщо це не $ останнє, він має клас останній, а останній елемент має клас інший ...

— strwoc

2

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

Приклад :

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

— Нурейн
джерело

0

Відповідь, яку дав Фабіан Перес, працювала на мене, з невеликою зміною

Відредагований HTML тут:

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

— Т. Найк
джерело