menu dinamico angularjs e html

[microinfo]

sto creando un menu su più livelli con bootstrap come questo esempio:
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
</ul>

il mio problema è caricare questo menù in maniera dinamica, ovvero ricevo in ingresso un json di questo tipo :

{
"level1": [{
"label": "Macro-entità",
"level2": [{
"label": "Inserimento",
"uri": "macro_ent_ins_uri"
}, {
"label": "Ricerca",
"uri": "macro_ent_search_uri"
}]
}, {
"label": "Entità elementare",
"level2": [{
"label": "Inserimento",
"uri": "basic_ent_ins_uri"
}, {
"label": "Ricerca",
"uri": "basic_ent_search_uri"
}]
}, {
"label": "Entità complessa",
"level2": [{
"label": "Inserimento",
"uri": "complex_ent_ins_uri"
}, {
"label": "Ricerca",
"uri": "complex_ent_search_uri"
}]
}, {
"label": "Gestione attributi",
"level2": [{
"label": "Inserimento",
"uri": "attrib_ins_uri"
}, {
"label": "Ricerca",
"uri": "attrib_search_uri"
}]
}]
}

da qui dovrei formare il menù inserendo la label e il relativo href. Il json lo prendo tramite rest e angularjs. Ho provato ad usare ng-repeat per creare le righe del primo livello, ma poi quelle del secondo livello non escono. In effetti non penso si possa fare solo con angularjs. Come posso risolvere?

[grigor91]

Prova ad aggungere questo script:

<script>
$(document).ready(function(){
$('.dropdown').on("click", '.dropdown-submenu a.test', function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>

[microinfo]

questo codice cosa fa?

[microinfo]

il problema è che proprio di logica, nel senso che il submenu è strettamente collegato al menu, quindi non posso ciclare con ng-repeat tutte le voci per i menu di primo livello e poi ciclare con ng-repeat tutte le voci per il secondo livello, perchè così facendo (se funzionasse) comunque mi ritoroverei tutte le voci di secondo livello collegate all'ultima voce del primo livello.
Secondo me andrebbe fatto in js, con due cicli for, parte il primo e stampa la voce del primo menu, poi controlla se esiste per quella voce di primo livello una di secondo livello (secondo ciclo) e se si la stampa. Dopo si passa alla prossima voce di primo livello e così via

[71106]

Usa una direttiva ricorsiva, cioe' una direttiva che fa riferimento a se stessa nel suo template.

Esempio:


.directive('myMenuItem', function () {
return {
scope: {
label: '@',
items: '=',
},
template: ''
+ '<li><a>{{label}}</a></li>'
+ '<ul ng-if="items">'
+ ' <my-menu-item ng-repeat="item in items track by $index" label="{{item.label}}" items="item.items"></my-menu-item>'
+ '</ul>',
};
})


Dopodiche' la usi cosi':

<my-menu-item ng-controller="MenuController" label="Menu" items="items"></my-menu-item>


.controller('MenuController', ['$scope', '$http', function ($scope, $http) {
$http.get('...').then(function (response) {
$scope.items = response.data;
});
}])

[grigor91]

Che versione usi di Bootstrap?

[microinfo]

la versione 3..
71106 puoi spiegarmi meglio, perchè non ho capito bene come funziona questo codice.
Premettendo che devo scorrere quel json inziale (e anche questo vorrei sapere come scorrerlo), dropdown-menu e dropdown-submenu non vanno più usati?

[71106]

In realta' mi sono appena reso conto che Angular non reagisce molto bene alle direttive ricorsive: il compilatore va semplicemente in stack overflow. :asd:

L'esempio di cui sopra di conseguenza non funziona. In giro si trovano articoli su come aggirare il problema: http://benfoster.io/blog/angularjs-recursive-templates

[grigor91]

la versione 3..
71106 puoi spiegarmi meglio, perchè non ho capito bene come funziona questo codice.
Premettendo che devo scorrere quel json inziale (e anche questo vorrei sapere come scorrerlo), dropdown-menu e dropdown-submenu non vanno più usati?

Allora sappi che in questa versione hanno rimosso il supporto ai submenu, quindi devi implementare te la parte di stili e script.
Puoi prendere spunto da qui (http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h).

In realta' mi sono appena reso conto che Angular non reagisce molto bene alle direttive ricorsive: il compilatore va semplicemente in stack overflow. :asd:

L'esempio di cui sopra di conseguenza non funziona. In giro si trovano articoli su come aggirare il problema: http://benfoster.io/blog/angularjs-recursive-templates

Inoltre c'è da considerare che il JSON di input non si adatta perfettamente a passaggi ricorsivi visto che le proprietà interne hanno dei nomi diversi.

[71106]

Inoltre c'è da considerare che il JSON di input non si adatta perfettamente a passaggi ricorsivi visto che le proprietà interne hanno dei nomi diversi. Questo riguarda il backend e assumo che per lui sia una modifica facile da fare.

[microinfo]

risolto con i css, grazie 1000 :)