Using angularJS to iterate over a list and increment a value based on a

Is there a way to set a variable outside of a loop and increment it only when a certain condition is met within the loop?

In Twig, this concept is implemented as follows:

{% for plan in entity.plan %}
   {% set spieltag = 0 %} <!-- This sets the variable inside the loop -->

   {% if (plan.spieltag != spieltag)  %}
   <tr class="bg-info">
      <td colspan="7">Spieltag: {{ plan.spieltag }}</td>
      <td></td>
   </tr>

{% set spieltag = spieltag + 1 %} <!-- This increments the variable only when the condition is false -->
{% endif %}
<tr>
    <!-- Some content that is always shown -->
</tr>
{% endfor %}

In Angular, a similar concept can be achieved using:

<tr data-ng-repeat="row in liga.plan" data-ng-init="spieltag = 0">
   <!-- Content that is repeated for each row -->
</tr>

However, the ng-init directive might not be in the right place. Where should it be placed and how can the variable be incremented only when the specified condition is false?

Sample data from the loop:

[{
    plan: [
        {spieltag: 1, home: foo, guest: bar},
        {spieltag: 1, home: foo1, guest: bar1},
        {spieltag: 1, home: foo2, guest: bar2},
        {spieltag: 2, home: bar, guest: foo},
        {spieltag: 2, home: bar1, guest: foo1},
        {spieltag: 2, home: bar2, guest: foo2},
    ]
}]

Answer №1

Essentially, it seems like your question is similar to what this individual is inquiring about: angular.js ng-repeat - check if conditional is true then use another collection

One possible solution could involve creating a function within your ng-controller to validate the variable. Would that be a viable approach for your situation?

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 sendFile function fails to transmit any data

Currently working on integrating the mailChimp API into my project, but facing an issue with the resFile code that handles sending the success response. The current code snippet: async function run(){ try { const res = await mailch ...

Issue with passing props to screen not displaying on initial load

Greetings, I'm a newcomer to the world of react native and currently facing an issue: const Tab = createMaterialTopTabNavigator(); export const CurriculumMenu = ({navigation, item}) => { const data = item.Title; console.log(data) return ( ...

After toggling the switch to send the current state to the server, the React state remained unchanged

Could you clarify why the relay1 state is being sent as false? Why doesn't handleControlRelay1 change the state? Am I making a mistake by placing this inside a function? setRelay1((prevValue) => !prevValue); // ... const [relaysData, setRelaysD ...

Error message: "The property or method you are trying to access is not defined

I had no issues with my app until I added the JavaScript, now I'm getting constant errors in the console. One of the errors I see is: Property or method "show" is not defined on the instance but referenced during render. Make sure that this proper ...

When an input is submitted, the keyword will default to the corresponding hex code in JavaScript

When searching for the color 'blue', the system displays palettes for "BLUE" instead of 'blue'. The issue seems to be related to the on submit function, and I am struggling to find a solution. If I remove the 'color' class fr ...

Phonegap app unable to process AJAX post request, functions properly in browser

My AJAX request is encountering issues specifically when tested on the Phonegap App using iOS10. The code I am working with is as follows and functions perfectly in a browser: if($.trim(firstname).length > 0 & $.trim(email).length > 0 & $.t ...

Accessing the value returned by an asynchronous function in Node.js with Electron

As I embark on a new project, my goal is to take user input, process it through a function, and then return the updated value back to the user. Despite being a novice with async functions, I've done extensive research but still can't pinpoint if ...

Execute the Selenium function repeatedly using values from an array in a loop

I am facing a challenge with running a selenium script in a loop to populate a database. I have an array of objects consisting of 57 items that need to be processed through the loop asynchronously. My goal is to iterate through each store, check its status ...

Troubleshooting problems with callback functionality in conjunction with Expressjs, JWT authentication, and Angular

For my current project, I am implementing authentication using JWT with Expressjs and Angularjs. However, I now need to integrate node-dbox to access Dropbox files of my users. The issue arises when trying to store the token received from Dropbox for user ...

Having trouble removing or adding a class to an HTML element?

I have a collection of three colored buttons. My goal is to allow users to select one button at a time, triggering it to be highlighted while the others are unselected. Each button corresponds to an object with a property called isSelected that can be set ...

Numerous directive references attached to document event

Trying to implement a directive that allows the binding of keyboard actions to elements on a page. Here is the directive: angular.module('app').directive('keyboardAction', keyboardAction); function keyboardAction() { return { ...

Is it beneficial to cater to users who do not have JavaScript capabilities on my website, considering that I am currently using JS links to

My website heavily relies on JavaScript for navigation, passing a parameter to always indicate the starting page and displaying it in a navbox for easy access back. Should I include both href links for non-JS versions and onclick links for JS-enabled vers ...

Calculate the total number of blank input boxes within a specific row of the table

What is the method to count the number of input boxes without a value in a table row using jquery? For instance: <table id="table1"> <tr class="data" id="row5"> <td><input type="text" value="20%" /></td> <td><input ...

Using JS or jQuery to organize JSON data into a multidimensional array

Dealing with frontend processing of a response from a server that provides event reviews for the season has been challenging. In this case, there can be multiple reviewers for the same event and the simplified version of the response appears as follows: [ ...

What is the best method for importing OrbitControls into my three.js project?

I'm having trouble importing OrbitControls into my project. I included three.js and then attempted to import OrbitControls, but it's not functioning as expected. I added three.js to the HTML body using the following command: script src="https:/ ...

What is the best way to change the order of rows and columns in

Is there a way to rotate a table using jQuery? Maybe with a function or some other method? For instance, if I have a table structured like this: <table> <tr> <th></th> <th></th> <th>&l ...

A step-by-step guide on proxying an AngularJS app to XAMPP

Greetings, apologies if my title lacks precision. I will do my best to articulate my issue clearly. I utilized a yeoman generator from here to scaffold my AngularJS app. Additionally, I set up XAMPP for Apache and MySql. Upon running 'grunt serve&apo ...

Executing jQuery after the body has finished loading

I'm trying to execute a JavaScript function once the body has finished loading. My framework loads the header and footer from static files, while the body content is dynamic. I read online that I should place the $(elem).load(function()) at the end of ...

Bidirectional communication between two AngularJS scopes or controllers utilizing a service

I am facing numerous situations where I require clicks or other interactions to trigger actions in a different area of the webpage (one-way communication). Now, I have encountered a need for bidirectional communication, where changes made in element A can ...

Animating overlapping div elements using jQuery

I am currently using jQuery's animate() function to adjust the size of a "row", but I am facing an issue with a badge that sometimes appears on the row. The problem is that the badge gets hidden during the animation, which doesn't look good. I ha ...