angularjs - ng-repeat の最後の要素の異なるクラス

Question

このような ng-repeat を使用してリストを作成しています

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

<div class="last">test</div>しかし、最後の要素だけでは、クラス ( ) を含めたいと思います。ng-repeat を使用してこれを達成するにはどうすればよいですか?

Answer 1

ディレクティブ$last内で変数を使用できます。docng-repeatを見てください。

次のように実行できます。

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

は、引数を 1 つ取り、またはを返すのcomputeCssClass関数です。controller'last'null

または

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

Answer 2

CSS で行う方が簡単でクリーンです。

HTML:

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

CSS:

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

セレクターは現在、:last-of-type98% のブラウザーでサポートされています

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

Answer 4

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

それは私のために働く！幸運を！

Answer 5

最後の要素を見つけるためにlimitToフィルターを使用できます-1

例：

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