AngularJS add conditional class in ng-repeat

Question

I'm working with some AngularJS ng-repeat looping, but I want to generate the markup of a grid, but need to add a 'grid--last' class to the 4th item in the grid, is this achievable?

My HTML:

<div ng-repeat="service in services" class="grid__4">
                <div class="services__box">
                    <img src="img/services/{{service.thumb}}.jpg" alt="" class="services__box__img">
                    <h1 class="services__box--alpha alpha">{{service.title}}</h1>
                    <p>
                        {{service.text}}
                    </p>
                    <a href="{{service.url}}.php" class="services__box--btn btn btn--blue">{{service.button}}</a>
                </div>
            </div>

Ideally I need to get the index of the array and use ng-class. Can anybody shed some light as to how I could do this? Thanks!

ng-class="{}"

simeg · Accepted Answer · 2015-01-10 03:13:04Z

2

Angular repeat scope provide an $index property; therefore, you can do data-ng-class="{'grid--last': $index == 3}" assuming you mean that 4th item is 3 since index start at 0.

edited Jan 10, 2015 at 3:13

simeg

1,8792 gold badges27 silver badges34 bronze badges

answered Jun 8, 2013 at 14:53

Noogen

1,65212 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Stephen Jenkins Over a year ago

Thanks! Just tried it, however it doesn't work :( can you advise on the HTML usage to make sure I'm doing it correctly? Thanks again.

Stephen Jenkins Over a year ago

Console error actually: Error: Syntax Error: Token '-' is unexpected, expecting [:] at column 6

Stephen Jenkins Over a year ago

Does work infact, but my hyphens aren't letting it work. Any ideas how I can fix that? :)

Noogen Over a year ago

Sorry, I forgot about the hyphen. You could wrap it around single quote: 'grid--last': $index == 3

Jason · Accepted Answer · 2013-06-08 15:26:49Z

2

You can do this with CSS, but there may be browser compatibility issues with IE8 and lower (shocking)

plnk here

relevant code:

<style>
      li.item {
        background-color:blue;
      }

      li.item:last-child {
       background-color: red;
      }
    </style>
  </head>

  <body ng-controller="testCtl">
    <ul>
      <li class="item" ng-repeat="val in [1, 2, 3, 4]">{{val}}</li>
    </ul>
  </body>

answered Jun 8, 2013 at 15:26

Jason

15.9k3 gold badges51 silver badges73 bronze badges

Collectives™ on Stack Overflow

AngularJS add conditional class in ng-repeat

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related