Determine if a class is odd or even in Angular by utilizing ng-click

Trying to alternate classes on elements in an ng-repeat loop based on whether they are even or odd...

<div ng-click="displayHTML(content)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name">
    {{content}}
</div>

When ng-click is triggered, displayHTML() is called with the parameter content to handle a specific div that was clicked.

The goal here is to only execute the function if the clicked element has the class of ng-class-odd, not ng-class-even.

In search of a straightforward Angular solution for this issue. If it's not achievable within Angular, what would be the best approach to accomplish this functionality?

$scope.displayHTML = function(obj){
////    

}

Answer №1

ngRepeat provides access to local variables in the scope, such as $even and $odd. Utilize these variables like so:

<div ng-click="displayHTML(content, $even)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name">
    {{content}}
</div>

Javascript:

$scope.displayHTML = function(obj, $even) {
    if($even) {/* code for even */}
    else {/* code for odd */}
}

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

The $.each function seems to be stuck and not cycling through the

Dealing with a rather intricate JSON structure, I'm encountering difficulty iterating through it using the $.each() function. It seems to be related to the unusual 2-dimensional array passed in the value section of the standard array (hopefully that m ...

Issue with AngularJS expression not functioning as expected in Chrome for setting input type to "file"

I have encountered a strange bug while working on an Angular form builder application. The issue arises in Chrome when I try to dynamically set the input type based on a variable. Surprisingly, this method works perfectly for all input types except "file", ...

Why do developers opt for getServerSideProps() over a standard asynchronous function in their code?

Recently, I decided to experiment with the getServerSideProps() function. While I understand it must have its purpose, to me it seems similar in utility to a typical async function. Take for example my current task of retrieving user data using Prisma and ...

determining the overall page displacement

I'm working with this code and I need help using the IF condition to check if the total page offset is greater-than 75%. How can I implement that here? function getLocalCoords(elem, ev) { var ox = 0, oy = 0; var first; var pageX, pageY; ...

What is the best way to link to this list of options?

#episode-list { padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,.8) } input { width: 100%; padding: .5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #d9d9d9 } <div id="epis ...

Achieving successful functionality with position:relative in IE9

Having difficulty with the position: relative property in IE9. Check out this demo for reference: <div style="overflow:scroll;height:120px;"> <table id="table" width="100%"> <tr style="position:relative;background-color:#1b72a4;"> ...

Transform JSON into an Array and generate a new Array from a collection of Arrays

I'm struggling with generating a table in Angular2 from JSON data because I need to pivot the information, but my usual method doesn't seem to work for this scenario. Below is an excerpt of the JSON data I am working with: [ { "ValueDate" ...

Having difficulty launching a new window within an app built with Electron and Nexjs (Nextron)

Attempting to launch a (Nextjs-generated) page in a new window is causing an error message to appear: Uncaught ReferenceError: global is not defined Here is the full error: react-refresh.js?ts=1665849319975:10 Uncaught ReferenceError: global is not de ...

Triggering a new window on button click with Vue and Nuxt

Having an issue with a button click event in Vue that opens a PDF using window.open(). It's working well on all browsers except for Safari on MAC. Any ideas what could be causing this? Should I pass $event to the method? <div class="button-do ...

Unlocking the Power of Typescript and ReactJS: Maximizing Efficiency with Previous State

I'm encountering difficulties implementing the previous state in React 18 with Typescript version 4.8.3. Here is my refreshToken code and I'm receiving the following error: Value of type '(prev: any) => any' has no properties in c ...

The conventional method for including React import statements

I'm curious if there is a standard convention for writing import statements in React. For instance, I currently have the following: import React, { useState, FormEvent } from 'react'; import Avatar from '@material-ui/core/Avatar'; ...

Error: Module not located - Unable to resolve 'crypto'

Upon running ng serve, I encountered a list of errors that need to be addressed. Here is my package JSON configuration: { "name": "ProName", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "tes ...

Utilizing jQuery and DOM to interact with form elements

Below is the form content <form method="post"> <input type="hidden" name="resulttype" value="Create"> <table> <tr> <td>Full Name</td> <td><input ...

Issue in JavaScript / D3.js: When button is clicked, data fails to update and instead new positions are plotted

When the user clicks a button, both the red woman (unvaccinated) and the blue woman (vaccinated) should be updated to reflect the new value. At present, when the button is clicked, the red woman updates correctly but the blue woman is recreated in the loca ...

I Failed to Keep My Word

Struggling to grasp the concept of Promise right now. I have been recommended to use bluebird (https://github.com/petkaantonov/bluebird) to handle the callback hell I've been experiencing. Example: function login(req,res,con,mysql,P) { var ref = und ...

Function asynchronously returning Promise even after Await statement is executed

I've been attempting to develop a function that retrieves data from a document in the Firebase database using Nodejs: module.exports = async (collectionName, documentId, res) => { const collection = db.doc(`/${collectionName}/${documentId}`); t ...

In Vue, emitting does not trigger the parent component to update its properties

The emit is functioning properly, as I can observe in the vue developer tool. However, the property in the parent element is not updating. Child Component: <template> <div> <ul> <li v-for="(option, index) in opt ...

Animate the sliding effect without being limited to a specific list

In many ng-animate slide demonstrations, a predefined list of items is used for sliding transitions. But in my scenario, I am obtaining the next item through an ajax call and do not have a pre-defined list. What approach should I take to achieve a slide ...

An error popped up as I attempted to load an existing design within the vue-email-editor

https://i.stack.imgur.com/0ObU5.png Check out the code snippet below for the function I have created: editorLoaded() { this.$refs.emailEditor.editor.loadDesign(this.emailJson); console.log('editorLoaded'); }, ...

How can I prevent my mouse click from being overridden by my mouse hover?

Currently, I am developing a Sudoku game using JavaScript and facing some challenges with mouse events. My goal is to enable users to hover over a square and have it change color, as well as click on a square to highlight the entire row, column, and quadra ...