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

Using JavaScript, implement the array.filter method on a JSON array to retrieve the entire array if a specific property matches a given

Help needed with filtering an array: In the user_array, there are arrays that need to be compared to see if the header_info.sap_number matches any value in the valid_sap_number array. If a property value matches anything in the valid_sap_number array, th ...

The element is not positioned correctly due to the absolute positioning

This is my first attempt at creating a jQuery plugin and I have almost got it working correctly. You can view the example here. I've been struggling for days to position an element as desired. The goal is to display some text with an optional downwar ...

Make the adjustment from an H1 tag to an H2 tag with the help of

I need assistance with changing the HTML code from using an <h1> tag to a <h3> tag, using Vanilla JavaScript. Here is the code snippet in question: <h1 class="price-heading ult-responsive cust-headformat" data-ultimate-target=" ...

Once the ajax request is finished, load only the <script> tags that have specific ids

I'm currently implementing infinite-scroll to dynamically load more content which includes <script> tags that need to be executed. To achieve this, I have created the following code as an ajax-callback: JS on load ajax callback: function a ...

Switching the GET method to DELETE in nodeJS can be accomplished using an anchor tag

Let's say I have a link in my EJS file like this: <a href="/user/12">Delete</a> In my route file, I have the delete code set up like this: router.delete( '/user/:id', function ( req, res ) { // code for delete operation }); ...

Introduction to Angular initial rendering

I have a straightforward question, but unfortunately I am unsure how to search for it. As my initial page loads, I want Angular to automatically display the first content in <div ng-view>. Subsequently, using $routeProvider takes care of reloading t ...

When using express, the response.sendFile() function is causing an Uncaught SyntaxError with the error message: Unexpected token <

Currently, I'm utilizing react-router with browserHistory. There is a specific function in my code that is meant to send the Index.html file since the routing is handled client-side with react-router. However, there seems to be an issue where the serv ...

Launching a Node.js Express application on Heroku

I'm facing an issue while trying to deploy my app on Heroku, as I keep encountering the following error: 2022-08-11T12:49:12.131468+00:00 app[web.1]: Error: connect ECONNREFUSED 127.0.0.1:3306 2022-08-11T12:49:12.131469+00:00 app[web.1]: at TCPConnect ...

Securing a REST API accessible through JavaScript by implementing authentication techniques due to the visibility of the public code

Inquiry: Need advice on securing an internal API intended for AJAX calls made within the website. I have developed a REST API in PHP 7.2 for use with client-side Javascript. Typically, I work on server-side applications where I can control access using a ...

Combine the entities within the object

I need to combine two objects that contain other objects within them, similar to the following structure: let selections = { 123: { abc: {name: 'abc'}, def: {name: 'def'} }, 456: { ghi: {name: ' ...

Guide on embedding PHP code into a HTML div element using JQuery

I am having trouble loading PHP code into a div tag to display the results. The code I have listed below does not seem to work for me. If anyone can offer assistance in resolving this issue, I would greatly appreciate it. Here is the code snippet: <h ...

Could anyone provide some insight into the reason behind this occurrence?

I just came across the most peculiar situation I've ever experienced. Check out this unique test page: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script language=javascript> fun ...

Updating the value of bound data in AngularJS after a specific time interval

I am having trouble changing a bound data value through a controller after a delay. Below is the simple code I am using: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> & ...

determining the preference between setTimeout and setImmediate

After reading the documentation on the node, it mentions: setImmediate(callback, [arg], [...]) This function is supposed to execute callback immediately after I/O events callbacks and before setTimeout and setInterval However, in practice, I noticed tha ...

Ways to send user input to a function within a React component

I am currently working on implementing a simple feature where users can search posts by their tags. To achieve this, I have created the Feed.jsx component with the following code: "use client"; import { useState, useEffect } from "react&quo ...

How can you utilize a computed property in a Vue component to select all the text within it?

When using $event.target.select(), I usually can select all the text. However, in this scenario, it seems to be selecting everything and then replacing the selection with the computed property. How can I select all after the computed property has finished? ...

A guide to organizing page components across multiple `/pages` directories in a Next.js application

As I delve into my first project using Next.js, I find that my pages directory has expanded significantly. Now, I am keen on organizing my pages by grouping them into modules, resulting in a structure like 'src/modules/*/pages/*'. In my quest fo ...

How to Develop a WebSocket Client for Mocha Testing in a Sails.js Application?

I've been attempting to utilize the socket.io-client within the Mocha tests of my Sails JS application for making calls like the one shown below. However, the .get/.post methods are not being invoked and causing the test case to time out. var io = re ...

Module not discovered by nodeJS within the current directory

In my node application, I am trying to incorporate a module called dishRouter. The file structure looks like this :- Structure The dishRouter is exported from Dishes/index.js and imported into my app.js using the following code: var dishRouter = re ...

React Checkbox Sum Component - Effortlessly Improve User Experience

Looking for assistance with passing checkbox values to a React component in my app. I'm currently implementing a food list display using JSON data, but I'm unsure how to transfer the checkbox values to another component. For reference, here&apos ...