What is the best method for utilizing ng-repeat to apply unique classes to each index?

As I work on constructing a timeline, I am looking to reverse every other index within the ng-repeat. Utilizing ng-repeat-start and ng-repeat-end on separate divs seems to only result in repeating the same array twice.

<ul class="timeline">
    <li ng-repeat-start="t in vm.patientTimeLine">
        <div class="timeline-badge" style="background-color:#f9f9f9!important;"><i class="fa fa-phone hg-blue" aria-hidden="true"></i></div>
            <div class="card-block">
                 <h4 class="card-title"> {{t.FirstName}}'s reply was: <b ng-if="t.ReplyMessage !== null" class="stop">{{t.ReplyMessage}}</b></h4>
            </div>
     </li>

     <li class="timeline-inverted" ng-repeat-end>
        <div class="timeline-badge" style="background-color:#f9f9f9!important;"><i class="fa fa-phone hg-blue" aria-hidden="true"></i></div>
           <div class="card-block">
               <h4 class="card-title"> {{t.FirstName}}'s reply was: <b ng-if="t.ReplyMessage !== null" class="stop">{{t.ReplyMessage}}</b></h4>
           </div>
     </li>
</ul>

My expectation is to display the list once but with alternate css classes (timeline and timeline-inverted).

I appreciate your help and insights in advance.

javascriptcssangularjsangularjs-directive

Answer №1

To achieve a timeline-inverted effect on every other row, you can utilize the ngRepeat variables provided by AngularJS. For instance:

$even   is a boolean value that is true when the iterator position $index is even (otherwise false).

For a complete list of available variables, check out this link: https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer №2

vicbyte's response is accurate, however I feel it is helpful to provide additional context.

The ng-class directive allows for the conditional application of classes within an ng-repeat loop.

<div ng-repeat="item in items" ng-class="{ 'highlighted': $odd }"></div>

Answer №3

To enhance your design, consider utilizing the $index and implementing

ng-class="{'timeline': $even, 'timeline-inverted': $odd}"

Another option to explore (in my perspective) is utilizing css classes such as "nth-child" to adjust classes through css. Explore W3Schools nth-child for guidance. I'm a newcomer to stack overflow so I may not be familiar with using JSFiddle but you could try:

.timeline-inverted :nth-child(even) // Even Elements

.timeline-inverted :nth-child(odd) // Odd Elements

If you are uncertain about where to apply the class, if you intend to modify the class of a div element within your ngRepeat, you can execute the following:

.timeline-inverted div:nth-child(even)
.timeline-inverted div:nth-child(odd)

Trust this adequately addresses your inquiry.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing nested components with distinct styling techniques

I have a react component that accepts the size prop as either small, regular, or large. Depending on the size, a specific CSS class is assigned to style the component accordingly. Here's an example of how these classes are defined: .my-component { ...

cssreactjssass

Child component event triggers an error: "Uncaught TypeError: Unable to access property 'value' of undefined"

I'm a newcomer to React and while following the Lifting State Up tutorial, I encountered issues when attempting to modify the value from Child.js. An error is thrown stating that it is undefined. Another question I have is why it's impossible to ...

javascriptreactjs

Obtain access to global.window.localStorage within getServerSideProps

I have a component that receives props with data and renders the data. In my functionality within the getServerSideProps, I am attempting to retrieve data from localStorage. However, due to window being undefined, I am unable to do so. I have tried using ...

javascriptnode.jsreactjsnext.js

What is the best method to showcase the value in HTML using either Angular or JavaScript when the return is true or false?

Just a heads up: The code snippet below is all about logic, so no parameters have been defined. However, they are actually defined and actively used in the same javascript file that I'm diving into. My venture into javascript/angularjs (not quite sur ...

javascripthtmlangularjsfunctionangularjs-ng-show

What is the best way to incorporate vertical lines into a set of progress bars?

I want to create progress bars with vertical lines representing specific steps within the progression. While I can display progress bars, I am unsure how to incorporate these vertical lines. Does anyone have any suggestions or ideas on how to achieve this? ...

htmlcssprogress-bar

What is the best way to query based on a nested object property in Mongoose?

const collection = [ { inner_obj: { prop: "A" } } ] Get the outer records by searching for the ones that match the value of the `prop` property within the `inner_obj` column. How can we locate the o ...

javascriptnode.jsmongodbexpressmongoose

Fixed navigation bar at the top of the page

After implementing code found at this source to create a sticky navigation bar at the top of my webpage, I encountered an issue. When I tried adding my actual navigation content into the navbar, it appeared about 20 pixels below the top and then snapped ba ...

jqueryhtmlcss

react application - Displaying the future value of a variable on the console log

Just starting with react. Superior component : // manages the json order parsed from child and retrieves the parsed data // child component invokes this method by calling this.props.onAdded() handleAdded = (orderData) => { let items = orderDat ...

javascriptreactjsstate

Effortless navigation fails to glide seamlessly

I have scoured through numerous resources on achieving smooth scrolling, but I am still unable to make it work. I am considering writing the code in a "js/script.js" file and then pasting the link to "script.js" at the bottom of the main page. Do I need to ...

javascriptjquery

What is the best way to access a frameset inside an iframe using JavaScript?

I'm having trouble identifying my mistake (apart from using frames, of course :-P). <script type="text/javascript"> var cols = the_set.cols; //operates within frameset.html var cols = frames['set_iframe'].the_set.cols; // does ...

javascripthtmliframeframes

Automating web interactions with Python and Selenium to simulate clicking a button on a webpage

click here to see the image On a quest to connect to and hit the "good" button located 3/4 of the way down. I attempted to use Selenium's get_element(By.xpath) method, but upon inspecting the elements, I noticed that all buttons appear identical in ...

javascriptpythonselenium

Switching between height: 0 and height:auto dynamically with the power of JavaScript and VueJS

Currently, I am changing the height of a container from 0px to auto. Since I do not know the exact final height needed for the container, using max-height could be an option but I prefer this method. The transition from 0 to auto works smoothly, however, ...

javascriptcssvue.jscss-transitions

How can I select elements in CSS that are "between x and y"?

If I have an HTML table with 20 rows and 3 columns (20x3), I am looking to highlight the rows from 7 to 12 in red. What CSS selector should I use for this specific task? How can I define the range of rows to be styled as "between"? ...

csscss-selectors

"Angular encountering an error with converting a string to a date due to

I have a date stored as a string in the format '2022-07-15T09:29:24.958922Z[GMT]'. When I try to convert it to a date object, I am getting an error saying it is an invalid date. Can anyone help me with this issue? const myDate = response; / ...

javascriptangulardate

Is there a way to dynamically assign ng-include or ng-controller in Angular JS?

I'm a beginner with Angular JS and after some research, it seems like what I want to achieve might not be possible. However, I'd like to explore if there is an alternative solution that can provide a similar outcome. My goal is to populate a pag ...

javascriptjsonangularjs

Turbolinks not allowing the addition of JavaScript classes for background images

While trying to merge a front end html theme with my Laravel app, I encountered an issue with turbolinks that is preventing Javascript from appending div classes. This is resulting in background images only being displayed on page refresh. <div class= ...

javascriptcsslaravelturbolinks

Deliver the Stripe API response from the backend to the frontend page

I'm struggling to retrieve the response object from Stripe after creating a subscription using npm. import Stripe from 'stripe'; const key = require("stripe")("XXXXXXXXXXXXXXXXX"); export function subscribe(cus, items) { key.subscription ...

javascriptnode.jsnpmstripe-paymentsvelo

When using Math.floor(Math.random() * val.length), the result will be a letter rather than a number

Looking to implement a feature where a different background image is displayed randomly upon page visit or refresh. Currently, specifying the images in an array like the example below works well, but I want to be able to pull from a folder. $(document).r ...

javascriptjqueryajaxmath

Exploring how Angular mat-checkbox can be targeted within dynamically generated nested elements

I am facing a challenge with a series of checkboxes that I create using mat-checkbox, including a corresponding Select all checkbox. What I want to achieve is to selectively hide the specific (and first) checkbox without affecting any other elements within ...

cssangulartypescriptangular-material

Is there a way to toggle the slide effect of one 'div' without affecting another one?

Hey everyone! I am new to jquery and currently working on a project with two div elements that are slidetoggled. The issue I am facing is that when I open or close one div, the other div also moves along with it. I understand what is happening in the back ...

javascriptjqueryhtmlslidetoggle