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: []
            }
        ]
    }
];

Answer 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.