Как на Angular сделать динамическое меню?

Question

[MagNet]

Всем привет.
Есть меню:

меню1
    подменю1
    подменю2
    подменю3
    т.д
меню2
    подменю1
меню3

Изначально я загружаю элементы верхнего уровня (меню1, меню2 и т.д.), при клике на элемент меню я загружаю дочерние элементы (ajax) и сохраняю их в меню1.children = [тут подменю]. Всё тоже самое необходимо и для подменю. Степень вложенности неограниченная.
Каждый элемент меню содержит следующие данные:
id, name, parent_id, level
Элементов будет примерно 200 - 250. Вложенность, скорее всего, максимально 3 уровень.
Как лучше это сделать на angularjs? Может есть более правильный подход?

Answer 1

[Сергей]

Если вы спрашиваете про отрисовку в html, то вам поможет ng-include с шаблоном. Шаблон одного пункта можно хранить прямо в вашем view в скрипте.

<script type="text/ng-template" id="category.html">
   код элемента
</script>

В нужном месте (где будет само дерево) пишем:

<ul>
      <li ng:repeat="category in categories" ng:include="'category.html'"></li>
</ul>

categories - наш основной массив с деревом.
"'category.html'" - кавычек должно быть двое, чтобы вернуть строку.

Внутри кода элемента (в шаблоне, то есть) надо будет соответственно написать:

ID: {{category.id}}, 
NAME: {{category.name}}
<ul ng:if="category.children">
        <li ng:repeat="category in $parent.category.children" ng:include="'category.html'"></li>
       <!-- $parent нужен из-за ng-if -->
</ul>

По поводу структуры все понятно - к каждому элементу добавляется массиив с дочерними (children) элементами. При клике на элемент будет идти загрузка, данные добавятся в изначальный массив, он обновится, соответственно обновится и html-дерево. Если, конечно, вы будете подгружать данные нативными методами, запускающими перерисовку, или используете ($scope.$apply(fn))

Я в своих проектах делал именно так (правда, без подзагрузки пунктов - деревья были не более 30 элементов). Если есть способ лучше - буду рад о нем узнать.

Comments

[MagNet]

Спасибо, решение подошло, но есть небольшое замечание, данные загружались из сети и условие ng:if="category.children" не срабатывало, поменял на ng:if="category.children.length" и всё стало пучком, может знаете из за чего это?