append html elements as nested with angularjs javascript

Question

I have a custom directive named hero And I want to create a nested view for multiple heros. Demo

I want to get a view like this:

<hero a="1">
    <hero a="2">
        <hero a="3">
            <hero a="4"></hero>
        </hero>
    </hero>
</hero>

and controller is like this:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    var elements = [
        angular.element('<hero a="1"></hero>'), 
        angular.element('<hero a="2"></hero>'), 
        angular.element('<hero a="3"></hero>'),
        angular.element('<hero a="4"></hero>')
    ];

    var content;

    for(var i = 0; i < elements.length; i++){

        if(!content){
                content = elements[i];
        }else{
                content.append(elements[i]);            
        }
    }

    console.log(content[0]);        
}

but it appears :

<hero a="1">
    <hero a="2"></hero>
    <hero a="3"></hero>
    <hero a="4"></hero>
</hero>

You missed an content = elements[i] after content.append(..) — cyr_x
– cyr_x, Commented Feb 23, 2017 at 18:07

lealceldeiro · Accepted Answer · 2017-02-23 20:42:25Z

1

EDIT: Full refactor of the idea exposed on the original answer.

You just need to keep "indexed" your last node so you can access to it and append the new (current) element to it. I show the relevant part of the code below.

function MyCtrl($scope) {
    //... your code omitted for brevity

   var content;
   var eArr = [];

    for(var i = 0; i < elements.length; i++){

        if(!content){
                content = elements[i];
        }else{
                elements[i - 1].append(elements[i]);
        }
        eArr.push(elements[i]);
    }

    console.log(content[0]);
}

edited Feb 23, 2017 at 20:42

answered Feb 23, 2017 at 18:08

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lealceldeiro Over a year ago

Please, see my answer edited. With an ief should work.

lealceldeiro Over a year ago

OK, let me check the demo. This seemed to be not so complicated. I'll give you feedback later

lealceldeiro Over a year ago

@bookmarker, I just edited my answer. See the new result gotten with this code. Sorry for the wrong previous answer. I tested this one and I got the result you said you needed.

barteloma Over a year ago

Thanks for solution

Collectives™ on Stack Overflow

append html elements as nested with angularjs javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related