I recently utilized ng-repeat to iterate over a ul element.
Unfortunately, I've run into an issue where I can't simply use nth-child(even) to change the background color of every other ul element.
Does anyone have any alternative solutions or suggestions? I'd greatly appreciate it!
ngRepeat provides the boolean properties $even and $odd, which can be used with ngClass:
<ul>
<li ng-repeat="item in items" ng-class="{'some-class':$odd}">
{{item.someText}
</li>
</ul>
Note: The values of $even and $odd are determined by the current $index, which starts at zero. Therefore, you may need to use $odd instead of $even.
Alternatively, you can utilize the ngClassEven / ngClassOdd directives:
<ul>
<li ng-repeat="item in items" ng-class-even="'some-class'">
{{item.someText}
</li>
</ul>
Check out this brief demo as well.
Give this a try
html
<div ng-app="">
<div ng-init="predicate='name'; reverse=false;">Sort by: predicat:{{predicate}} reverse:{{reverse}} </div>
<div ng-click="reverse=!reverse">[change reverse]</div>
<div ng-click="predicate='name'; reverse=!reverse;">[set predicate: name + change reverse]</div>
<div ng-click="predicate='id'; reverse=!reverse;">[set predicate: id + change reverse]</div>
<div ng-init="lines=[{'name':'eee', 'id':7}, {'name':'aaa', 'id':9}, {'name':'ccc', 'id':8}, {'name':'bbb', 'id':2}, {'name':'ddd', 'id':3}]">
<ul ng-repeat="line in lines | orderBy:predicate:reverse" ng-class-odd="'odd'" ng-class-even="'even'">
<li >{{ line.name }}</li>
</ul>
</div>
</div>
Output
How can I set this image as both the left and right background image on my webpage? I want it to be displayed on both sides. Any suggestions on how to achieve this? Here is the code snippet I have implemented so far: <%@ Page Language="C#" AutoEventW ...
I am currently working on refining the JS code to merge rows with common values and classes in a table. The existing code successfully merged common rows but failed to consider their classes. Snippet of the Table code: <tbody id="property_dtl_table_bo ...
I want to implement a modal popup using the Ajaxtoolkit's modalpopupextender, and so far it's working perfectly. While the popup is displayed, I need to dim out the rest of the page. To achieve this, I applied the modalPopup CSS class to the pop ...
I am attempting to modify the CSS of 2 ASP controls using jQuery specifically for users accessing the site with Internet Explorer 10 or 11. This adjustment is necessary because IE10 onwards, conditional comments are no longer supported. My approach to achi ...
Trying to find a specific report link but struggling with the generic information provided. The key lies in identifying a span element that can differentiate the link from the rest. Currently, I am using xpath's preceding-siblings method to locate the ...
My current project involves using Quasar and I am attempting to style the first column of q-table: <style lang="scss" scoped> td:first-child { background-color: #747480 !important; } </style> Unfortunately, this code does not seem to have a ...
I am experiencing an issue where the content of an HTTP canvas disappears when a tooltip is present on a button that opens a new tab. This is a very specific problem, so let me guide you through it. I can recreate the issue with the following HTML, but u ...
I've been racking my brain over this for hours with no luck! Objective: Implementing inline styles for table, td, th, p elements in an HTML email intended for Gmail using PHPMailer. Challenge: Inline styles not being rendered HTML Snippet: <sec ...
I am working with a textarea that has the following definition: <textarea spellcheck="true"></textarea> As users type, spelling mistakes are highlighted (such as with a red underline in my browser). Is there a way, possibly using jQuery, to v ...
I am facing a challenge where I need to display a progress bar in my UI based on a percentage value stored in a JSON response object. Here is an example of the JSON object: { completionPercent: 42 } The desired UI outcome should look like this: ┌ ...
Encountering an issue with a rather straightforward website. It consists of a vertical scroll with a left side navigation. Whenever I click on a menu item, it fails to bring the corresponding section to the top of the page. I've experimented with a fe ...
Currently, I have Phantom running on a Node server to generate pages from data and render them as PDFs. Despite the pages rendering correctly as PDFs, I am facing an issue where the external CSS file is not being taken into account. Below is a simplified ...
One of the buttons on my webpage triggers an overlay using JavaScript that directs to a URL like the following: However, when the close button is clicked, the overlay is removed but the "/#about" part of the URL remains. What is the most effective method ...
I recently completed a form with approximately 800 fields, only to realize that I accidentally gave some of the fields the same ID. Can someone please advise me on how to track down these duplicate IDs? ...
Looking for a way to make the uibootstrap navbar functional even when there's an active modal on the screen? Here's a common issue with bootstrap 3 navbar + modal: https://i.sstatic.net/JYADC.png The menu becomes unusable when the modal is dis ...
Is it better to update the checklist status by making individual ajax calls for each checklist item or by making one call and updating it once completed? I have included a template showing how it currently looks and what I am aiming for. Unfortunately, I ...
Currently, I have implemented a jQuery function to display a popup box using .show() and hide it using .hide(). Is there a way to incorporate charming animations such as fading into the popup box? // display pop up $('.mypopup').show(); // con ...
When moving rows between tables, everything seems to work fine. However, once the row is moved to the other table, all JavaScript functions related to that row stop working, and the reason remains unknown. The JavaScript code is simple - it involves takin ...
Is there a way to add the fade-in animation to an image when it is loaded with JavaScript or CSS? Currently, the code I have only fades in the image once it is 25% visible in the viewport. How can I modify it to include the fade effect upon image load? ...
Alright, I have an interesting idea here. I am looking for a way to allow users to push a button and have a new p element permanently added to the HTML file. This means that even after reloading the page, everyone should be able to see this new element. An ...