Increasing variable in angular template (nested ng-repeat)

I am facing a similar situation as described in the example below, and I need to generate a serial number for each row independently for each mark record.

Here is the Java script Object structure:

 $scope.childsList = [
        {
        id:12346,
        name : 'Sagar Kulthe',
        marksList : [{subject:'Math', marks: 55}, {subject:'English', marks: 54}, 
                        {subject:'Biology', marks: 65},     
                        {subject:'Physics', marks: 78}]
    },
    {
        id:12346,
        name: 'Amol Pawal',
        marksList : [{subject:'Math', marks: 55}, {subject:'English', marks: 54}, 
                        {subject:'Biology', marks: 65},     
                        {subject:'Physics', marks: 78}]
    },
    {
        id:12346,
        name: 'Tushar Shah', 
        marksList : [{subject:'Math', marks: 55}, {subject:'English', marks:      
                         54},  {subject:'Biology', marks: 65},
                         {subject:'Physics', marks: 78}]
    }
    ];

Below is the View structure:

<table>
    <thead>
        <th>Sr NO:</th>
        <th>Name</th>
        <th>Subject</th>
        <th>Marks</th>
    </thead>
    <tbody ng-repeat="child in childsList track by $index">
        <tr ng-repeat="mark in marksList track by $index" ng-init="marksIndex = $index">
            <td>{{marksIndex }}</td>
            <td>{{child.name}}</td>
            <td>{{mark.subject}}</td>
            <td>{{mark.marks}}</td>
        </tr>
    </tbody>
</table>
javascriptangularjsangularjs-ng-repeat

Answer №1

The solution below can assist you in resolving the issue: https://plnkr.co/edit/CEbyJNevu94LBogYUek7?p=preview

<table ng-init="count[0]  = 0">
  <thead>
    <th>Sr NO:</th>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </thead>
<tbody ng-repeat="child in childsList track by $index" ng-init="count[+$index + 1]  = +count[+$index] + child.marksList.length">

    <tr ng-repeat="mark in child.marksList track by $index">

        <td>{{count[+$parent.$index] + $index + 1}}</td>
        <td>{{child.name}}</td>
        <td>{{mark.subject}}</td>
        <td>{{mark.marks}}</td>

    </tr> 
</tbody>

Answer №2

It appears that the necessary changes need to be made as follows: 

<td>{{mark.subject}}</td>
<td>{{mark.marks}}</td>

Additionally, it seems that the ng-init directive may not be required, since $index can be accessed directly. Thus, the modification would look like this:

Modified based on a comment from another answer that has been removed

Assuming this is the controller: 

app.controller('appCtrl', ['$scope', function($scope){
    $scope.counter = 0;
    $scope.childsList = [
      ......
    ];
}]);

For the markup section:

 <tbody ng-repeat="child in childsList track by $index">
    <tr ng-repeat="mark in marksList track by $index" ng-init="marksIndex = $index">
        <td>{{counter+1}}</td><!-- Will start at 1, 2, 3 -->
        <td>{{child.name}}</td>
        <td>{{mark.subject}}</td>
        <td>{{mark.marks}}</td>
    </tr>
</tbody>

Answer №3

Here's a quick example that may assist you:
Simply adjust number 2 to match the length of your markList.

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

Utilizing background styles for enhancing the appearance of Ionic side menus

I've been experimenting with ionic and angular.js, trying to figure out the best way to apply background styles to side menus. I currently have a blurred background image with content boxes placed on top of it. My goal is to keep the background fixed ...

javascripthtmlcssangularjsionic-framework

Leverage the power of JSON data in conjunction with HighCharts through

I'm struggling to understand the JSON format and HighCharts. Despite trying various techniques found on forums, I haven't been able to achieve the desired result. Here's my issue: 1- When clicking, an Ajax call is made to a PHP file that g ...

javascriptjqueryajaxjsonhighcharts

Learn the process of updating a nested document within an array in MongoDB

I have a data structure as shown below: { "name":"xxxxxx", "list":[ { "listname":"XXXXX1", "card":[ { "title":"xxxxxx", "descip":"xxxxxxx ...

javascriptnode.jsmongodb

Retrieve specific components of objects using a GET request

When visitors land on my web app's homepage, a GET request is triggered to fetch a current list of Stadiums stored in the database through my API. However, the Stadium objects retrieved are packed with unnecessary data, particularly extensive arrays o ...

javascriptangularjsnode.jsmongodbmongoose

Getting started with React Native project

Just dipping my toes into the world of React Native and looking for recommendations on the best starter kit/generator to kickstart my projects. Tried out "create-react-native-app" already, but curious if there are any other generators or kits out there tha ...

javascriptreactjsreact-native

What is the best approach for managing Create/Edit pages in Next.js - should I fetch the product data in ServerSideProps or directly in the component?

Currently, I am working on a form that allows users to create a product. This form is equipped with react-hook-form to efficiently manage all the inputs. I am considering reusing this form for the Edit page since it shares the same fields, but the data wil ...

javascripttypescriptnext.jsserver-side-renderingreact-hook-form

Incorporating D3's library functions into Rxjs for seamless integration with Observables

I'm really struggling with this concept and could use some guidance. My goal is to monitor when data is fetched, but I seem to have confused the process. Here's what I've tried so far: Using d3.tsv for an ajax request. var test = Rx.Observa ...

javascriptajaxd3.jsobservablerxjs

Having trouble retrieving the data from the second child object in an object returned by an API call in a

Having trouble accessing the second child object of an object generated by an API response. The weather API in question can be found at . Refer to Display.js for a detailed explanation. App.js import React,{useState} from 'react'; import Navbar ...

javascriptreactjsjsonjsxresponse

What could be causing the failure of the JSON parse for dynamic link parameters?

I am currently attempting to pass parameters to a dynamic page within an Amplify/NextJS application. This is still a work in progress. My objective is to utilize the passed parameters to generate a basic page based on 4 parameters included in the URL invo ...

javascriptnext.jsaws-amplify

What precautions can I take to safely and securely extend event handling?

I am currently developing a small JavaScript library that includes components requiring "messages" based on specific page events, which allow users to define response functions. I need to access general events like onkeydown and let users determine how eac ...

javascriptevent-handling

Exploring Methods for Retrieving offsetHeight and scrollHeight in AngularJS

I am currently developing a directive that requires three specific values: scrollTop offsetHeight scrollHeight projectModule.directive('scroller', function ($window) { return { restrict: 'A', link: function (scope, elem, attrs) { ...

javascriptangularjs

Steps to programmatically update Node modules:

I am looking to incorporate the use of npm update within a script. Take a look at my code snippet below: var npm = require('npm'); npm.load(function () { npm.commands.outdated({json: true}, function (err, data) { //console.log(data); npm ...

javascriptnode.jsnpm

The Plupload internal version seems to be incorrect. The file is labeled as 2.3.9, however, the actual version within the file is 2.3

We recently identified a security vulnerability issue with plupload 2.3.6 being deemed as vulnerable. To address this, we downloaded version 2.3.9 from the official Plupload website here: Upon inspection, we found that the zip file is labeled as 2.3.9, bu ...

javascriptjqueryplupload

Updating a user's information post-login: A step-by-step guide

I'm encountering some challenges when it comes to modifying a user's information post-login. I am utilizing the MEAN stack (MongoDB, Express, AngularJS, Node.js) alongside Passport.js. I suspect that the issue may lie within the express route, th ...

angularjsnode.jsmongodbexpresspassport.js

Code snippet for fetching JavaScript file using Angular's caching mechanism

Currently in my project, I am utilizing $.getScript to dynamically load specific sections of code. Here's a snippet of how it looks: var mainJs = "/main.js"; $.getScript( mainJs ) .then(function () { console.log("main.js loaded"); }); ...

javascriptjqueryangularjscachingangular-cache

Having trouble getting the toggle menu to work using Jquery?

I am trying to create a toggle menu using jQuery on this particular page: . The menu is located in the top right corner and I want it to appear when someone clicks on the "Menu ☰" button, and then disappear when clicked again (similar to this website: ). ...

javascriptjquerycss

Using Vue.js for handling events with the passing method

As a newcomer to Vue.js, I am currently trying to understand method event handling. My goal is to read a barcode using input from a web camera and display its raw content. The function works perfectly if I just render the raw content. However, when I att ...

javascriptvue.js

Navigating the division between presentational and container components in React/Redux

Here is a basic outline of my current setup: container.js: import Presentation from './Presentation'; import { connect } from 'react-redux'; export default connect( ({ someState}) => ({ ...someState }), (dispatch) => { ...

javascriptreduxreact-reduxreactjs

An alternative to PHP's exec function in Node.js

I am interested in developing a piece of software using C (such as prime number factorization) and hosting it on my web server with Node.js. Following that, I would like to create an HTML document containing a form and a button. Upon clicking the button, ...

javascriptphphtmlnode.jsexpress

Modifying the color of an empty string is not feasible in Javascript

Is it possible to change the color of FirstName only when there is text input? Currently, it turns green when there's text, but I want it to turn red when it's empty. How can this be achieved? $(document).on("click", '.btn-info.mailCo ...

javascripthtmlcssstring