Exploring the concept of nested recursive directives by incorporating them with the ng

Exploring Nested Recursive Directives using ng-repeat. I came across

Developing Nested Recursive Directives in Angular

I am interested in customizing the data of level 2 UI template on my own, instead of simply recalling or re-rendering the same template.

For instance

<ul>
   <li>
     <div>Europe</div>
       <!-- Customize by myself the UI of level 2 -->
       <ul>
          <li>
            <div><img src="italy.jpg" /></div>
            <div>Italy</div>
          </li>
       </ul>
   </li>
</ul>

How can I adjust the Directive link function to add a new template to level 1

javascriptangularjsrecursionangularjs-directiveangularjs-ng-repeat

Answer №1

Consider this example:

<div style="float: left;">
                            <ul>
                                <li ng-repeat="item in LIST">
                                    <span id="listItems">
                                        {{item.HEADER}}
                                    </span>
                                    <ul>
                                        <li ng-repeat="subitem in item.SUBLIST">
                                            <span id="listItems">
                                                {{subitem.HEADER}}
                                            </span>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

In this code snippet, the variable LIST represents the first level list, while each object within it has a SUBLIST for the second level list.

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

Getting the result from a JavaScript request, whether it's synchronous or asynchronous

This code snippet involves a function that starts with a synchronous comparison test == 0. If the comparison is true, it returns one piece of content; however, if it's not, an asynchronous request is made. The goal here is for the latter part to retur ...

javascriptjqueryajaxasynchronous

Deliver the PDF generated document to Django Rest API

I have successfully created a PDF from an HTML file, Now, I am looking to automatically email the PDF as soon as it is generated. To achieve this, I need to send it to Django REST for backend processing. However, I am facing difficulties in figuring out h ...

javascriptreactjsdjango-rest-frameworkhtml2canvashtml-to-pdf

Ways to retrieve and upload a blob from a file object

After receiving a file object via an HTML input on-change event in my component.html: onFileSelected(event) { this.selectedFile = event.target.files[0]; } Now, I need to send a POST request to upload the image to the database. The database only acc ...

javascriptangularionic-frameworkimage-processingblob

Looking for assistance in showcasing information retrieved from an external API

I've been working with an API and managed to fetch some data successfully. However, I'm having trouble displaying the data properly in my project. Can anyone provide assistance? Below is a screenshot of the fetched data from the console along wit ...

javascriptreactjsfetch-api

What is the best way to group elements in pairs using jQuery?

I'm stuck with the code below: <span>Hello</span> <span>Hello</span> <span>Hello</span> <span>Hello</span> <span>Hello</span> <span>Hello</span> I have a requirement to transfor ...

javascriptjqueryhtml

Unable to create a polygon on the Google Maps API using GPS coordinates inputted from a text field

I am currently developing an interactive map using the Google Maps API. The map includes a floating panel with two input fields where I can enter GPS coordinates. My goal is to create markers and connect them to form a polygon. While I can easily draw lin ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Verify that all the input values within the class are empty using jQuery

Within this section, I have multiple input text fields all sharing the same class: <input type="text" class="MyClass"></input> <input type="text" class="MyClass"></input> <input type="text" class="MyClass"></input> My ...

javascriptjqueryhtmlcss

Issues with AJAX Load functionality

As a beginner in jQuery, I am experimenting with an AJAX load function. However, I am encountering difficulties in making it work. Despite trying different approaches and file formats (.php, etc.), I ended up using the first method I attempted. My goal is ...

javascriptjqueryajaxload

Prevent XHR from responding to OPTIONS method

Currently, I am in the process of developing an API that will be hosted on Azure functions and a Web App that will reside on Azure Blob storage. To ensure seamless communication between my API and the users' browsers, I have implemented proper handlin ...

javascriptajaxxmlhttprequest

Incorrect Request Method for WCF json POST Request Leads to 405 Error (Method Not Allowed)

Hey there, I'm facing an issue with using Microsoft Visual Studio to create a WCF web service. Everything runs smoothly within Visual Studio, but when I try to connect to the service from outside, it fails to establish a connection. At first, I encoun ...

c#javascriptajaxjsonwcf

retrieving the current value of a variable from a jQuery function

I've done my best to keep things simple. Here's the HTML code I've put together: <div id="outsideCounter"><p></p></div> <div id="clickToAdd"><p>Click me</p></div> <div id="in ...

javascriptjquery

Using JavaScript, learn how to extract query parameters and encoded information from a URI

I am looking for a specific module in order to extract information from query parameters within a URL. The format includes 2 query parameters and an encoded piece of data. Do I need to use split functions or is there a more direct approach available? Sampl ...

javascriptnode.jsnpmgoogle-cloud-platform

"Optimize your website by incorporating lazy loading for images with IntersectionObserver for enhanced performance

How can I use the Intersection Observer to load an H2 tag only when the image is visible on the page? Here is the JavaScript code I currently have: const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObser ...

javascripthtmlintersection-observer

Issue with accessing Vue.js parameter in route

Trying to work with both VueJS and Laravel, I am currently facing an issue where I cannot retrieve a parameter value. Can anyone provide guidance on how to solve this problem? This is my VueJS code: getTestData:function () { let config = { par ...

javascriptajaxlaravelvue.js

Issue: Accumulated Unresolved Requests Karma

Trying to simulate an http request but encountering this error Error: Unflushed requests: 1 in /Users/..etc/angular-mocks.js Here is the relevant code snippet describe('Tests for Group Controller', function() { var $httpBackend; beforeEach ...

angularjsjasminekarma-runnerhttpbackend

The ng-view directive appears to be malfunctioning

index.cshtml <head> <meta name="viewport" content="width=device-width" /> <title></title> <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/angular-route.min.js"></script ...

asp.netangularjs

JavaScript list items experience unreliability once stored in the database

I am in the process of setting up an ajax endpoint on my server to create a new transaction object and add it to a block, which is then added to a local blockchain. The problem arises when I invoke my database function add_block, responsible for adding th ...

javascriptajaxdatabase

Is this method an effective way to create global states across React components?

After delving deep into props-drilling while coding a full-fledged web application with React, I've decided to explore using React 'contexts'. Following the guidelines in the React documentation, I am implementing an approach to make my stat ...

javascriptnode.jsreactjsreact-hooksreact-context

Issue with IntersectionObserver not detecting intersection when the root element is specified

I am encountering an issue with my IntersectionObserver that is observing an img. It works perfectly when the root is set to null (viewport). However, as soon as I change the root element to another img, the observer fails to detect the intersection betwee ...

javascripthtmlcssvue.jsintersection-observer

How can I make tooltipster display tooltips properly?

I have been struggling to customize tooltips using a library called tooltipster. Here is what I currently have: Head of index.html: <head> <!--TOOLTIP CSS--> <link rel="stylesheet" type="type/css" href="node_modules/tooltipster-master ...

javascriptjquerycsstooltiptooltipster