The value of $parent.$index will consistently be 0 in all cases

I am currently dealing with a nested ng-repeat situation where I am attempting to determine the parent's index.

Due to the fact that it is being arranged post-process, the standard 

ng-repeat="(step_index, step) in flow"

method is not working for me. Can anyone shed some light on why this might be occurring?

<ul>
    <li ng-repeat="step in flow | orderBy:'+step_number'">
        <div class="step_container">
            <div class="step_content">
                <div ng-repeat="task in step.tasks">
                    <div class="task_container">
                        <div class="task_content">      
                            {{ $parent.$index }} - {{ $index }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>
javascriptangularjs

Answer №1

If you want to set the parent index in AngularJS, you can add ng-init="$parentIndex = $index" to your parent <li> element. Then, you can simply call $parentIndex within the child ng-repeat.

<ul>
    <li ng-repeat="step in flow | orderBy:'+step_number'" ng-init="$parentIndex = $index">
        <div class="step_container">
            <div class="step_content">
                <div ng-repeat="task in step.tasks">
                    <div class="task_container">
                        <div class="task_content">      
                            {{ $parentIndex }} - {{ $index }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

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

Internet Explorer freezing when running selenium executeScript

Hey everyone, I've spent the past couple of days scouring the internet trying to find a solution to my modal dialog problem. There's a wealth of helpful information out there and everything works perfectly fine except for Internet Explorer. Speci ...

javajavascriptinternet-explorerseleniumwebdriver

"I'm looking for a solution on integrating Osano CookieConsent into my Next.js application. Can

I'm facing a bit of a challenge with incorporating the Osano Cookie Consent JavaScript plugin into my nextjs app. I've been attempting to set up the cc object by initializing it in the useEffect of my root landing page: const CC = require( " ...

javascriptreactjscookiesnext.js

Customize Column Headers in Handsontable: A Quick Guide

Is there a way to customize the appearance of column headers in handsontable? I have provided a jsfiddle example to showcase my current progress. While I am able to format the first row of data and change the column titles, I am facing difficulty in forma ...

javascripthandsontable

Concealing axis lines within the initial circular grid or opting not to include them

Is there a way to incorporate some whitespace within the center circle of the radar chart? I'm aiming for the axis to commence at 1 radius (the initial circular line) or perhaps have the stoke set to 0 for the primary radius. Any assistance would be g ...

javascriptcssreactjsd3.js

What is the process for displaying all items within an object in Ionic 3?

Perhaps my question is not very clear, but what I am attempting to do is when the Feed item in the categories screen is clicked, all companies related to Feeding will be listed on the companies screen. I am quite confused because each category may have mu ...

javascriptangulartypescriptionic-framework

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Can anyone assist with solving an issue I am facing with a timer and a pause button? I need the pause button to be disabled once clicked, until a popup appears, then it should become enabled again. My code snippet is provided below: HTML: <button md-i ...

javascripthtmlangulartypescript

Updating Button Color Based on Input Field Value in EJS

How can I change the color of a button in EJS when the input value changes? <div> <textarea name="mytextarea" id="inputcontent" cols="30" rows="3" style="margin-top: 10px; margin-bottom: 10px; f ...

javascriptnode.jsfrontendejs

Express encountered an unexpected error when attempting to navigate to the client directory

I am attempting to send the index.html file from my client directory, located at the same level as my server directory. However, I am encountering the following error: TypeError: undefined is not a function at Object.handle (/myapp/server/routes/routes.js ...

javascriptnode.jsexpress

Having trouble getting your AJAX call to function properly? Could be that you're searching for the incorrect

Whenever the button is pressed, I need an AJAX call to be sent to my events_controller#check action. Here's the code snippet: events\new.html.erb: <button id="check-button" type="button">Check</button> application.js: $(document). ...

javascriptjqueryruby-on-railsajax

Transforming various date formats into the en-US format of mm/dd/yyyy hh:mm:ss can be accomplished through JavaScript

When encountering a date format in en-GB or European style (mm.dd.yyyy), it should be converted to the en-US format (mm/dd/yyyy). If the date is not already in en-US format, then it needs to be converted accordingly. ...

javascripttypescript

The .SVC file's generated Javascript proxy URL fails to function properly when used with SSL

The ASP.Net web site I have deployed in IIS 7.5 includes a file named Cart.svc, which is used for accessing JavaScript from the browser. While the JavaScript functions fine without SSL, enabling SSL causes it to stop working. Interestingly, removing the / ...

asp.netjavascriptwcf

Removing nested divs using JavaScript

My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...

javascriptjqueryhtmlcss

Access numerical values from JSON objects using JavaScript

I need assistance with implementing a JavaScript function to retrieve data from a JSON file and then display it on my webpage. The goal is to iterate through the values in a while loop and dynamically insert them into specific HTML elements. xhttp.onrea ...

javascriptjson

Retrieving a specific attribute pair from a JSON object

Currently, I am trying to retrieve the temperature data and display it on my webpage. Since these are objects with no specific order, I am struggling to understand how to access them without using an index. { "response": { "version": "0.1", "termsofServic ...

javascriptphpjqueryjsonobject

Is it feasible to incorporate a third-party JavaScript file into a React application?

I have a JavaScript file from a previous MVC project that generates a basic table using ExtJS. Currently, I'm working on developing a new React application with a navigation bar and sidebar. My goal is to explore the possibility of importing the exis ...

javascriptreactjsextjsimport

Unable to click, but can only be activated by touchstart or mousedown

Is it possible to bind a 'click' event to a paragraph? Here is the function I am using: $(document).on('touchstart mousedown',"p span.text", function(e) { console.log('I was clicked'); *more code here* }); When I ...

javascriptjqueryjquery-events

Service has not been properly declared

I encountered an issue with AngularJS where I am struggling to import a Service from one module to another. In the Data module, I have a Service named MenuDataService that I need to utilize in the MenuApp module. However, when attempting to do so, I receiv ...

javascriptangularjs

The "self" variable in the Node.js prototype object fails to retain the correct context for the callback function

Although I have experience as a developer, I am new to Java Script and Node.js. I have searched through various examples and Stack Overflow answers, but I couldn't find a simple and complete example of a prototypical class with correct 'self&apos ...

javascriptnode.jscallbackprototypal-inheritance

Utilizing query parameters in Next.js

I've been working on a unique Next.js application that incorporates both infinite scroll and a search input feature. The infinite scroll functionality loads 6 additional items whenever the user reaches the bottom of the page. On the other hand, the s ...

javascriptreactjsnext.js

How can the printing of content be adjusted when the browser zoom function is activated?

Is there a way to prevent the content from zooming when printing while the browser is zoomed in? The goal is for the printing (using iframe) to remain unchanged even if the browser is zoomed. I attempted: document.body.style.transformOrigin = 'top le ...

javascripthtmlcssreactjsprinting