Different class for the last element in ng-repeat

Question

I am creating a list using ng-repeat something like this     lt div ng-repeat  file in files  gt       file name       lt  div gt    But for the last element alone I would like to have a class   lt div class  last  gt test lt  div gt   included to it  how can i achieve this using ng-repeat

User · Answer

You could use limitTo filter with -1 for find the last element  Example      lt div ng-repeat  friend in friends   limitTo  -1  gt        friend name    lt  div gt

User · Answer

It s easier and cleaner to do it with CSS   HTML    lt div ng-repeat  file in files  class  file  gt       file name     lt  div gt    CSS    file last-of-type       color   800      The  last-of-type selector is currently supported by 98  of browsers

User · Answer

The answer given by Fabian Perez worked for me  with a little change  Edited html is here    lt div ng-repeat  file in files  ng-class    last    other     class-for-last   gt      file name    lt  div gt

User · Answer

You can use  last variable within ng-repeat directive  Take a look at doc   You can do it like this     lt div ng-repeat  file in files  ng-class  computeCssClass  last   gt     file name     lt  div gt    Where computeCssClass is function of controller which takes sole argument and returns  last  or null   Or     lt div ng-repeat  file in files  ng-class    last   last   gt      file name      lt  div gt

User · Answer

To elaborate on Paul s answer  this is the controller logic that coincides with the template code      HTML  lt div class  row  ng-repeat  thing in things  gt     lt div class  well  ng-class  isLast  last   gt         lt p gt Data-driven   thing name   lt  p gt     lt  div gt   lt  div gt      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-Only Solution     Using the above example syntax  row last-of-type      Desired Style

User · Answer

lt div ng-repeat  file in files  ng-class    last    class-for-last     other   gt       file name    lt  div gt    That works for me  Good luck

[angularjs] Different class for the last element in ng-repeat

Examples related to angularjs