How to dynamically add a class in ng-repeat using AngularJS

Question

How to dynamically add a class in ng-repeat using AngularJS

Currently, I am utilizing AngularJS ng-repeat to loop through some data. However, I am trying to create a grid layout and want to apply a 'grid--last' class to the 4th item in the grid. Is there a way to achieve this?

This is what my HTML looks like:

<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>

I am looking to determine the index of the array and utilize ng-class for this task. Any suggestions on how to get this done would be greatly appreciated. Thank you!

ng-class="{}"

javascript angularjs

Answer 1

Answer №1

When using Angular's repeat scope, you have access to the special $index property. This allows you to apply conditional classes based on the index position of each item in the loop. For example, you can use

data-ng-class="{'grid--last': $index == 3}"

to target the fourth item in the loop (since indexes start at 0).

Answer 2

When using Angular's repeat scope, you have access to the special $index property. This allows you to apply conditional classes based on the index position of each item in the loop. For example, you can use

data-ng-class="{'grid--last': $index == 3}"

to target the fourth item in the loop (since indexes start at 0).

Answer 3

Answer №2

Applying this effect can be achieved using CSS, but it's important to note potential compatibility issues with older versions of Internet Explorer (such a surprise!)

Check out the code snippet here

Here is the relevant code snippet:

<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>

Answer 4

Applying this effect can be achieved using CSS, but it's important to note potential compatibility issues with older versions of Internet Explorer (such a surprise!)

Check out the code snippet here

Here is the relevant code snippet:

<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>

How to dynamically add a class in ng-repeat using AngularJS

Answer №1

Answer №2

Similar questions

Is it considered a best practice to use collection.find() to retrieve all items on a master node in Mongo?

When activating a bootstrap class button, I must ensure the reply-box remains hidden

Having trouble with Javascript not detecting when it's empty?

Unable to retrieve req.body data, despite having body-parser enabled

The content of XMLHttpRequest is accessible via the property response

The onChange function does not seem to be functioning properly within the Reactstrap customized input switch

Having trouble finding the element within the form tag even after attempting to use .switchTo().defaultContent()

Discovering image file extensions in JavaScript using regular expressions

Verification of phone numbers in HTML

The utilization of React context is unsuccessful

Using React.js with a PHP backend to create an API ecosystem for

Preview and enlarge images similar to the way Firefox allows you to do

Modifying the Readonly Attribute of an ASP.NET Web Application with the Power of JQuery

Different techniques for using percentages in CSS transformations to create dynamic animations for DOM element translations

Is using Javascript objects a better alternative to Redux?

Eliminate HTML tags when CKEDITOR is switched

Changing quotations to parentheses using Javascript Regular Expressions

Incorporating React.js into HTML DOM Elements

Netlify encountered an error with mixed content, indicating that the page was successfully loaded over HTTPS, but it attempted to request an insecure HTTP

TopoJSON conversion leading to surprising shapes and figures not found in original JSON