What is the best way to manage the cumulative index within two nested ng-repeats?

Within the scope of a directive, I am working with two ng-repeats. This directive is responsible for generating a table, and each table cell's data comes from a separate data source. This data source requires the cumulative index of the two repeaters.

selectedKandidaat.AntwoordenLijst[$index].Value

Currently, I only have access to the current $index or the $parent.$index. In order to keep track of the overall index required for Antwoordenlijst[$index], I will need to manage an index variable. Can I simply create and update an index variable in the view?

Perhaps something like this:

..
  {{ totalIndex = 0 }}
  <tr ng-repeat="opgave in opgaven">
    <td ng-repeat="item in opgave.Items">
    {{ totalIndex += 1 }}
..

The current implementation:

<table class="table">
    <tr ng-repeat="opgave in opgaven">
        <td ng-repeat="item in opgave.Items">
            <select ng-model="selectedKandidaat.AntwoordenLijst[$index].Value"
                    ng-options="alternatief for alternatief in item.Alternatieven">           
            </select>
        </td>
    </tr>
</table>

Answer №1

To determine the total count, you must take into account that each ng-repeat creates its own scope. Therefore, you need to count in the parent scope.

<div ng-repeat="a in items1">
    parent: {{$index}}
    <div ng-repeat="b in items2" itemcell>
        child: {{$index}}
        total: {{totalCount}}
    </div>
</div>
total: {{totalCount}}

and utilize a counter in the new itemcell directive

    app.directives
    .directive('itemcell', function () {
        return {
        restrict: 'A',
            link: function ($scope, iElement, iAttrs) { 
                if (!$scope.$parent.$parent.totalCount) {
                $scope.$parent.$parent.totalCount = 0;
            }
            $scope.$parent.$parent.totalCount++;
        }
    }
    })

You may also attempt to calculate the current index using $parent.$index, but this method only works effectively if you have collections with the same number of items.

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

Storing data values from a specific object key into an array in Vue: Step-by-step guide

Just dipping my toes into the world of Vue framework here. I managed to create a selectable table that stores data in an object. I want this function to run in the background, so I figured it should be in the computed section. The object structure is as fo ...

Steps to obtain an Element binding from a Svelte component

Is it possible to retrieve the bounding client rect of an anchor element? I typically mark this using the syntax bind:this={someVariable}. However, when I add this code to a Svelte component, I receive a different object that Svelte uses to represent a c ...

Restore to the prior iteration of jQuery

Encountered an issue after installing two libraries, one updating to jQuery 1.9.1 and the other installing 1.9.2. Found both versions of jQuery in my Scripts folder, so attempted an upgrade-package in nuGet to version 2.0.1. My project still requires com ...

No matter what I try, the Mongoose query consistently comes back with

I've been attempting to perform a query where I find products with an ID greater than a specified minimum, but it always returns an empty array. const productSchema = require("./productsSchema"); const getProductsGreaterThan = async (min ...

Remain on the React page following an HTTP POST request to Flask

Is there a way to stay on the React frontend (localhost 3000) after completing a POST request to a Flask backend from a React form, without redirecting in the Flask backend? Relevant code: export const DateForm = () => { return ( <div&g ...

What could be causing my Discord bot to remain offline even when I run the command node main.js?

After successfully installing node.js, I proceeded to type the command 'npm init' in the command prompt and then installed discord.js. However, upon installation of discord.js, a 'node_modules' folder was not added inside the project, w ...

Ways to smoothly navigate to a specific element across various browsers with jQuery animation

This particular piece of code is causing some cross-browser compatibility issues: jQuery('body').animate({scrollTop: target.offset().top}, 300); Interestingly, it works perfectly in Firefox but not in Chrome. A different version of the same co ...

What is causing the recursion function to return "NaN" in this scenario?

I'm trying to calculate the total sum of absolute differences between consecutive elements in an array using a function called sumAbsArr, but it seems to be returning NaN. var arr = [1, 5, 2]; var n = 3; var cur = 0; console.log(sumAbsArr(arr, n, ...

What is the best way to send a JSON object to bootstrap-table?

In my controller, I am passing a JSON encoded object to the view. Using a Bootstrap table in the view to display the data, but it is showing "No matching records found." Can someone please assist with this issue? Here is my controller: see image And here ...

Embedding a PDF file into an HTML form

For days, I have been on a relentless search for a solution to my problem to no avail. My ideal scenario involves embedding a fillable pdf form into an intranet html form for submission to the server, with the ability to parse field/values being a bonus b ...

When running the command `npm install <node_module> --save`, the dependencies are not being updated as

<=== If you're facing the same issue, try reinstalling your computer to fix it ===> I recently had to reformat my computer and set everything up again. After reinstalling Node and NPM, I encountered some problems that are really irritating me. ...

Retrieve the content of a text field with jQuery

Check out this block of HTML: <div class="sub-middle-column"> <div class="div-header">Grandsire <a "#", class="table-control-focus sub-header-table-focus" id="table-control-focus-t" >abc</a> <ul class="table-controls h ...

In Typescript with Vue.JS, the type 'Users[]' does not include the essential properties of type 'ArrayConstructor' such as isArray, prototype, from, of, and [Symbol.species]

Embarking on my journey with typescript and vuejs, I stumbled upon a perplexing error that has halted my progress for the past 48 hours. The error message reads as: Type 'Users[]' is missing the following properties from type 'ArrayConstruct ...

Is there a way to have the span update even if the input stays the same? Currently, it only changes when the input is different

Retrieve results of 3 lines (Ps) by entering a word in the text area and clicking search. If the word is found after clicking the button, a span will be displayed with the count of occurrences as well as the highlighted P(s) where it was found. If the wo ...

Creating a condensed version of the process: Utilizing jQuery for thumbnail preview on hover to create an image slideshow

I've created a video preview slideshow function using jQuery. As a newcomer to jQuery, I'm questioning if there's a more efficient way to achieve this. Having separate timers for each frame feels cumbersome and limits the flexibility in chan ...

Dealing with AngularJS: Issue arises when attempting to inject $modal into a controller nested within a directive

Our team has implemented a custom directive that wraps around a checkbox and utilizes transclusion to inject content into it. Here is an example of the setup: somecheckbox.js angular.module('namespace.directives') .directive('someCheckbox& ...

Filter prices (minimum and maximum) using a dropdown menu in asp.net core

Struggling to filter prices using javascript and asp.net core, I've written a lot of javascript code that isn't quite cutting it. I'm wondering if there's a simpler way to achieve this, perhaps with jquery or in c#? If anyone has any ...

Is it possible to dynamically update the contents of a modal body and modal footer using

I'm dealing with a modal that dynamically populates two sections: modal-body and modal-footer. However, the issue is that only the content of modal-body changes dynamically while modal-footer remains static. Here's an example of the HTML code (w ...

Retrieve the networkEvents generated by vis.js through the controller

How can I trigger a click event in my controller when the networkEvents are created in an angular-vs.js directive? I have tried using this code snippet, but it does not seem to be working: $scope.networkEvents = { onload:function(network){ alert("Clicked ...

Discovering XMLHttpRequest Issues within a Chrome Application

Is there a way to identify XMLHttpRequest errors specifically in Chrome App? For instance, I need to be able to recognize when net::ERR_NAME_NOT_RESOLVED occurs in order to display an error message to the user. While XMLHttpRequest.onerror is activated, ...