Merge Various Ng-Loops

Question

Merge Various Ng-Loops

I am working with an HTML structure in which each child has varying lengths:

<div ng-repeat='element in treeView'>
    <div ng-repeat='element1 in element.children'>
        <div ng-repeat='element2 in element1.children'>
            <div ng-repeat='element3 in element2.children'>
                <div ng-repeat='element4 in element3.children'>
                    <div ng-repeat='element5 in element4.children'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I find the multiple ng-repeat to be cumbersome.

Is there a more efficient way to organize this code?

javascript jquery css angularjs html

Answer 1

Answer №1

If you want to generate DOM nodes for all child elements of a treeView in a recursive manner, you can achieve this by creating a new component.

For example, you can use the following directive:

<your-component elements="vm.elements"></your-component>

Here is the code for the component:

angular.module('yourApp')
  .component('yourComponent', {
    templateUrl: 'template.html',
    bindings: {
      elements: '='
    },
    bindToController: true,
    controllerAs: 'vm'
  });

And the template code would look something like this:

<div ng-repeat="element in vm.elements">
    <your-component ng-if="vm.elements.children.length > 0" elements="vm.elements" ></your-component>
</div>

Please note that this code has not been tested, but with a bit of tweaking, you should be able to make it work as expected.

Answer 2

If you want to generate DOM nodes for all child elements of a treeView in a recursive manner, you can achieve this by creating a new component.

For example, you can use the following directive:

<your-component elements="vm.elements"></your-component>

Here is the code for the component:

angular.module('yourApp')
  .component('yourComponent', {
    templateUrl: 'template.html',
    bindings: {
      elements: '='
    },
    bindToController: true,
    controllerAs: 'vm'
  });

And the template code would look something like this:

<div ng-repeat="element in vm.elements">
    <your-component ng-if="vm.elements.children.length > 0" elements="vm.elements" ></your-component>
</div>

Please note that this code has not been tested, but with a bit of tweaking, you should be able to make it work as expected.

Merge Various Ng-Loops

Answer №1

Similar questions

Filling a select element in an HTML file using AJAX

Unable to adjust image opacity using jQuery

What is the method for launching a standalone terminal window from a vscode extension?

Implementing Bootstrap 4 in an Angular 9 project without the use of JQuery

Encountered an unexpected symbol < in JSON while implementing fetch() operation

Execute a virtual mouse click on a button without the need for a physical click

Resource loading unsuccessful: server returned a 405 status code, indicating method not permitted

Troubleshooting Problem with Responsive Bootstrap Navbar

Reactive form allows you to easily format dates

The content of XMLHttpRequest is accessible via the property response

Learn the steps to Toggle Javascript on window resize

Turn off the scroll function while loading a webpage

Tips for adding a label and value to a dynamic div with jQuery

AngularJS: Assign a class based on a variable's value

Managing the rendering of charts in Angular with Directives

Combine the animations of multiple elements in a queue using jQuery

What is the process of assigning data, in JSON format, from an HTML form to a variable?

Is it possible for the HTML data attribute to store a direct link to a specific DOM element?

Enhancing dynamic text boxes with jQuery by incorporating additional information

Learn how to dynamically apply a CSS attribute for a set period of time using jQuery and automatically revert it back to its original state after 2 seconds