Using .after() in AngularJS for nested ng-repeat recursive iteration

Question

Using .after() in AngularJS for nested ng-repeat recursive iteration

I have a straightforward layout

 function adjustLinks($scope) {
    $scope.links = [
        {
            text: 'Menu Item 1',
            url: '#',
        },{
            text: 'Menu Item 2',
            url: '#',
            submenu: [
                {
                    text: 'Sub-menu Item 3',
                    url: '#',
                },{
                    text: 'Sub-menu Item 4',
                    url: '#',
                    submenu: [
                        {
                            text: 'Sub-sub-menu Item 5',
                            url: '#',
                        },{
                            text: 'Sub-sub-menu Item 6',
                            url: '#',
                        }
                    ]
                }
            ]
        },{
            text: 'Menu Item 3',
            url: '#',
        }
    ];
}

I am interested in creating a table where the child items are displayed in successive rows following their parent item:

Menu Item 1

Menu Item 2

Sub-menu Item 3

Sub-menu Item 4

Sub-menu Item 5

Sub-menu Item 6

Menu Item 3

<table>
<thead>
  <tr>
     <th>Title</th>
     <th>Url</th>
  </tr>
 </thead>
 <tbody>
  <tr>
     <td>Menu Item 1</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Menu Item 2</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Sub-menu Item 3</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Sub-menu Item 4</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Sub-menu Item 5</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Sub-menu Item 6</td>
     <td>#</td>
  </tr>
  <tr>
     <td>Menu Item 3</td>
     <td>#</td>
  </tr>
 </tbody>
</table>

I have explored using ng-repeat-start and ng-repeat-end, but it does not meet my specific requirements.

Would appreciate any suggestions or guidance on how to achieve this setup. Thank you!

javascript angularjs

Answer 1

Answer №1

In case you are utilizing this code for website navigation, consider placing it within a nested <ul> and applying stylish CSS to enhance its appearance. Here is an example:

<ul ng-repeat="item in menuItems">
  <li>{{item.name}}</li>
  <ul ng-repeat="subItem in item.submenu">
    <li>{{subItem.name}}</li>
  </ul>
</ul>

This structure can be used to create a well-organized navigation menu on your website.

Answer 2

In case you are utilizing this code for website navigation, consider placing it within a nested <ul> and applying stylish CSS to enhance its appearance. Here is an example:

<ul ng-repeat="item in menuItems">
  <li>{{item.name}}</li>
  <ul ng-repeat="subItem in item.submenu">
    <li>{{subItem.name}}</li>
  </ul>
</ul>

This structure can be used to create a well-organized navigation menu on your website.

Answer 3

Answer №2

Here are some valuable resources to check out:

https://www.freecodecamp.org/news/tag/angular/

The examples provided in the first link might be exactly what you're looking for.

This question has definitely been asked before, so a quick search online should yield even more examples and helpful information related to your query.

Answer 4

Here are some valuable resources to check out:

https://www.freecodecamp.org/news/tag/angular/

The examples provided in the first link might be exactly what you're looking for.

This question has definitely been asked before, so a quick search online should yield even more examples and helpful information related to your query.

Answer 5

Answer №3

Currently, my approach is not flawless. Rather than a conventional table structure, the resulting HTML comprises nested ul/li elements that are styled with CSS to mimic the specified design.

The main issue stems from complications in placing tbody and tr within a directive. If anyone knows of a workaround for this, I would greatly appreciate your insights.

The basic markup looks like this:

<menucollection menucollection='links'></menucollection>

Backed by 2 directives:

window.app.directive('menucollection', function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            menucollection: '='
        },
        template: "<ul><menuitem ng-repeat='menuitem in menucollection' menuitem='menuitem'></menu></ul>"
    }
});

window.app.directive('menuitem', function ($compile{
    return {
        restrict: "E",
        replace: true,
        scope: {
            menuitem: '='
        },
        template: "<li>{{menuitem.Name}}</li>",
        link: function (scope, element, attrs) {
            scope.catMarker = attrs.marker;
            scope.subcatMarker = attrs.marker + ' »  ';

            if (scope.menu.Children.length > 0) {
                element.append('<menucollection menucollection="menu.submenu"></menucollection>');
                $compile(element.contents())(scope);
            }
        }
    };
});

Answer 6

Currently, my approach is not flawless. Rather than a conventional table structure, the resulting HTML comprises nested ul/li elements that are styled with CSS to mimic the specified design.

The main issue stems from complications in placing tbody and tr within a directive. If anyone knows of a workaround for this, I would greatly appreciate your insights.

The basic markup looks like this:

<menucollection menucollection='links'></menucollection>

Backed by 2 directives:

window.app.directive('menucollection', function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            menucollection: '='
        },
        template: "<ul><menuitem ng-repeat='menuitem in menucollection' menuitem='menuitem'></menu></ul>"
    }
});

window.app.directive('menuitem', function ($compile{
    return {
        restrict: "E",
        replace: true,
        scope: {
            menuitem: '='
        },
        template: "<li>{{menuitem.Name}}</li>",
        link: function (scope, element, attrs) {
            scope.catMarker = attrs.marker;
            scope.subcatMarker = attrs.marker + ' »  ';

            if (scope.menu.Children.length > 0) {
                element.append('<menucollection menucollection="menu.submenu"></menucollection>');
                $compile(element.contents())(scope);
            }
        }
    };
});

Using .after() in AngularJS for nested ng-repeat recursive iteration

Answer №1

Answer №2

Answer №3

Similar questions

A guide on how to implement the closing functionality of a CSS menu when clicking outside the menu using

Tips and tricks for implementing vuetify tooltips within a list component

How can I toggle input disablement in Bootstrap depending on switch selection?

Save information in a session using html and javascript

Step-by-step guide on uploading a multipart file with AngularJS and Spring MVC

Is it possible to bundle *.html templates using Require.js Optimizer functionality?

Guidelines on launching an ionic 4 modal using routes

The vast expanse of the cosmos, replacing the

Is there a hierarchy to be followed within the <head> element?

The connection timed out when attempting to send a POST request from the client side to the API

Different Zoom feature for JIT Graph

"What is the best way to change the props of a React component that has already been rendered from App.js

Positioning the comments box on Facebook platform allows users to

open a new window with a reference based on the name

Changing the order of element names depending on their location within the parent element using jQuery

What steps can I take to ensure that my popup images continue to appear?

Ways to extract particular items from a JSON array and store them in a JavaScript array

The image in drag and drop ghost preview is not appearing on Firefox

Altering webpage content through the use of Ajax

error message: The file you are trying to access does not exist due to the