Recursive or complex templating with Angular 1.x

Question

I have a data structure (sample provided below) where I need to iterate upon this set of questions and be able to template them in angular. Each "question" has this structure:

{
    id: 2, // unique id
    label: 'some label', // any label
    type: 'input', // the type of html element
    options: [], // other questions are nested in here (recursive)
    children: [] // other questions are nested in here (recursive)
}

As mentioned above, the type describes the type of html element and the difference between options and children is that the set of questions that rendered in options are display in the same line as the parent question whereas the questions inside of children are rendered one line below with a little bit of left margin.

I'm not familiar enough with Angular on how you'd achieve this, given that the basic ng-repeat would no suffice here (from what I understand) and I'm curious how one would go about templating this sort of data structure.

Many thanks, in advance, for the help!

Here's a sample data structure:

[
    {
        id: 1,
        label: 'something',
        type: 'text',
        options: [
            {
                id: 2,
                label: 'another',
                type: 'text',
                options: [],
                children: []
            }
        ],
        children: [
            {
                id: 83,
                label: 'cool',
                type: 'input',
                options: [],
                children: []
            },
            {
                id: 121,
                label: 'another cool thing',
                type: 'label',
                options: [
                    {
                        id: 451,
                        label: 'only a label',
                        type: '',
                        options: [],
                        children: [
                            {
                                id: 901,
                                label: 'a cool info',
                                type: 'label',
                                options: [],
                                children: []
                            }
                        ]
                    }
                ],
                children: []
            }
        ]
    },
    {
        id: 27,
        label: 'some text',
        type: 'label',
        options: [
            {
                id: 541,
                label: 'hey there',
                type: 'label',
                options: [],
                children: []
            }
        ],
        children: [
            {
                id: 761,
                label: 'hi there',
                type: 'checkbox',
                options: [],
                children: []
            },
            {
                id: 165,
                label: 'cool',
                type: 'text',
                options: [
                    {
                        id: 1090,
                        label: 'neat',
                        type: 'input',
                        options: [],
                        children: [
                            {
                                id: 9891,
                                label: 'tell me',
                                type: 'textarea',
                                options: [],
                                children: []
                            }
                        ]
                    }
                ],
                children: []
            }
        ]
    }
];

You'd need to use nested ng-repeats and apply ng-class depending on the kind of item you are looping trough to make options and children look different applying css classes. — Ricardo Zorzo
– Ricardo Zorzo, Commented Feb 16, 2017 at 23:44
Yes, that's what I originally had, however, it doesn't solve the following issues: --------- 1) nested ng-repeats is only as good as many the levels you write. hence why I was wondering if there's any other way of doing this ------- 2) ng-class doesn't account for the different types of html elements. i was thinking of using ng-switch and having all the various ones there, but is there any other way? — Detuned
– Detuned, Commented Feb 16, 2017 at 23:56

Ricardo Zorzo · Accepted Answer · 2017-02-17 00:11:15Z

1

I'd suggest using ng-if instead ng-class so you can call an external html template on the fly. You could event tune that template to have inside another ng-repeat if options or children exists so you loop till the end of the array/object no matter it's depth.

answered Feb 17, 2017 at 0:11

Ricardo Zorzo

2991 silver badge9 bronze badges

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

1 Comment

Detuned Over a year ago

Do you have any examples by chance?

Collectives™ on Stack Overflow

Recursive or complex templating with Angular 1.x

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related