Use AngularJS Ng-Repeat exclusively on nested rows

Consider the JavaScript object literal stored in a controller variable like this:

this.data = [{
    name: '1',
    children: [{
        name: '11',
        children: [{
            name: '111'}, {
            name: '112'}]}, {
        name: '12',
        children: [{
            name: '121'}, {
            name: '122'}]}]}, {
    name: '2',
    children: [{
        name: '21'}, {
        name: '22'}]}];

I am looking for a way to display only the children.children.name values in the view. I have considered using ng-repeat-start and ng-repeat-end, but I believe it may not be helpful in this case.

Another option I came across is creating a custom directive with no "html value" template, although I find this solution less than optimal.

Answer №1

You have the ability to create nested ng-repeats on the client side.

<div ng-repeat="dataItem in data">
  <div ng-repeat="children in dataItem.children">
     <div ng-repeat="grandChildren in children.children">
          <span>{{grandChildren.name}}</span>
     </div>
  </div>
</div>

While this may not be exactly what you had in mind, I hope it sparks some inspiration for your project. Good luck!

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

angularjs routing in webpack not functioning as expected

Looking for assistance I'm facing an issue with my app routing. It loads the home page properly, but when I try to navigate to the login page, nothing happens. It seems like it can't locate the login page, even though I have registered it. I&apos ...

What are some strategies for handling data after it has been retrieved using Axios?

In my current project, I am working with MySQL database and fetching data using Axios and a useEffect hook. Once the data is retrieved, I pass it to a component as a prop. Here's how: const Component = () => { //Database URL const urlProxy = &q ...

Tips for utilizing the "Sign In with Apple" feature through Apple JS

For implementing "Sign In with Apple" on a web platform using Apple JS, you can refer to the code example available at this link. Now, the query arises: where can I find the Client ID required for this process? I have tried using the app id identifier fro ...

Can you please help me find the location of the message "Warning: this function is designed for client-side use only and will not work on the server side" in React/Node?

I have a project using expressjs and react that I want to gradually make isomorphic. I'm taking baby steps in the process, but I'm struggling to pinpoint where certain logs, such as: "Warning: the function is client-side only, does not work on ...

The act of transmitting data via a timer using JS WebRTC leads to crashes if the page is reloaded before

In one of my server.js files served by a node, I have written the following code snippet: function multiStep(myConnection, data) { var i=0; var myTimer=setInterval(function() { if (i<data.length){ var element=JSON.string ...

Enhancing the functionality of a bootstrap button with the addition of an

My goal is to have a button that opens a URL in a new tab. I've managed to achieve this using window.location.href, but it doesn't open the URL in a new tab. The code I'm working with is written in jQuery and Javascript, and it's part ...

The browser window is converting the date automatically

I am currently facing an issue with date printing on the frontend of a website I'm developing. The date is fetched from a MySql database using Node.js (mysql module) and stored in the database as a MySql DATETIME format. The view engine in use is Hand ...

Integrate CSS and Javascript Plugins into your Ruby on Rails application

I am utilizing an HTML, CSS, and JS template to design the interface for my Rails application. Within this template, there are several plug-ins that are required in both CSS and JS formats. I have stored these plug-ins within the "/assets/plugins/" directo ...

selenium.common.exceptions.WebDriverException: Message: IndexError: array index out of bounds

I've been working on creating a web scraping tool that involves a Python script and a JavaScript code. The Python script is designed to call the JavaScript code, which then extracts relevant content from a web page and sends it back to the Python scri ...

receiving login failure alert upon attempting to sign in

After implementing a login page in Angular and connecting it to the database using an API, I encountered an issue. When entering incorrect credentials in Google Chrome, I receive a sign-in alert with reference to my API source located at http://staging.xyz ...

How do I retrieve an index value from an array in GraphQL?

I am seeking a solution for obtaining the index of an array item that is not returned by downstream response. Let's consider my schema: schema: type Cart { items: [Item] } type Item { name: String index: Int } When the data comes in, it lo ...

Editify Angular Text:Note: The name 'Edit

I am currently working on a coding project that involves allowing a user to click a button on the screen and view a paragraph that they can edit. I removed the readonly part of my code, but the paragraph is still not editable. How can I make it so that the ...

Learn how to retrieve the ID of an element with a simple click using PHP, jQuery, AJAX, and Javascript

Apologies for being a newbie in this field, but I'm eager to learn. Any assistance would be greatly appreciated. In my project, there is a sidebar with rss links that I want to incorporate ajax functionality into. So, whenever a user clicks on a link ...

@vue/cli for automated unit testing

I'm currently using @vue/cli version 4.5.15 and looking to write tests for my components. However, when I run the command, yarn test:unit I encounter an error that says: ERROR command "test:unit" does not exist. Do I need to perform additional se ...

Utilizing analytics.js independently of the react-ga library

Is there a way to integrate Google Analytics into my React app without using the react-ga package? I specifically want to access the ga function in a separate JavaScript file as well as within a React component. How can I achieve this by importing the anal ...

D3 Treemap- recursive rectangles are unexpectedly missing

I'm currently working on replicating a D3 zoomable treemap to gain a better understanding of D3 functionality. The original treemap can be found here: TL;DR: My issue is that I am only able to see the first two children of the JSON object, but not th ...

BroccoliMergeTrees function encountered an unexpected data type while attempting to merge trees: TreeMerger (lint) was expecting a Broccoli node, but received an [object

Since switching to Ubuntu 18.04, I've been trying to set up my Ember development environment but have encountered an issue. While my ember project works fine on Windows, I'm getting the error "BroccoliMergeTrees (TreeMerger (lint)): Expected Broc ...

Issue with scroll animation across multiple div elements

I am working on a project where I have two main divs, one with the id of "left-div" and the other with the id of "right-div". In the "left-div", there are multiple nested divs each with their own unique id. The overflow-y property of the "left-div" is set ...

exploring the capabilities of sockets in PHP, reminiscent of the functionality found in Node.js

I recently downloaded and tried out a basic chat app with Node.js: https://github.com/socketio/chat-example The app is functioning properly. The server-side code is quite straightforward: var app = require('express')(); var http = require(&ap ...

What is the method of transforming XML into JSON using angularjs?

Is there a way to convert an XML file into JSON using AngularJS on the client side? ...