Ich habe eine Datenstruktur (Beispiel unten zur Verfügung gestellt), wo ich auf diese Reihe von Fragen iterieren und in der Lage sein, sie in eckigen zu template. Jede „Frage“ Diese Struktur hat:Rekursive oder komplexe Templating mit Angular 1.x
{
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)
}
Wie oben erwähnt, beschreibt die Art die Art des HTML-Elements und den Unterschied zwischen options und children ist, dass der Satz von questions, die in options ist Anzeige in der gleichen Zeile gerendert als die Elternfrage, während die questions innerhalb von children eine Zeile unten mit einem kleinen linken Rand wiedergegeben werden.
Ich bin nicht genug vertraut mit Angular, wie Sie dies erreichen würden, vorausgesetzt, dass die grundlegende ng-repeat hier nicht ausreichen würde (von dem, was ich verstehe) und ich bin neugierig, wie man diese Art von Daten Templating gehen würde Struktur.
Vielen Dank im Voraus für die Hilfe!
Hier ist eine beispielhafte Datenstruktur:
[
{
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: []
}
]
}
];
Sie müssten verschachtelte ng-repeats verwenden und ng-class anwenden, abhängig von der Art des Objekts, das Sie durchschleifen, um Optionen und untergeordnete Objekte beim Anwenden von CSS-Klassen anders aussehen zu lassen. –
Ja, das ist, was ich ursprünglich hatte, aber es löst nicht die folgenden Probleme: --------- 1) verschachtelte ng-Wiederholungen ist nur so gut wie viele der Ebenen, die Sie schreiben. Deshalb frage ich mich, ob es andere Möglichkeiten gibt, dies zu tun ------- 2) ng-Klasse berücksichtigt nicht die verschiedenen Arten von HTML-Elementen. ich dachte daran, ng-switch zu benutzen und all die verschiedenen da zu haben, aber gibt es da noch einen anderen Weg? – Detuned