У меня есть html-структура, где каждый ребенок имеет разные значения длины:
<div ng-repeat='element in treeView'>
<div ng-repeat='element1 in element.children'>
<div ng-repeat='element2 in element1.children'>
<div ng-repeat='element3 in element2.children'>
<div ng-repeat='element4 in element3.children'>
<div ng-repeat='element5 in element4.children'>
</div>
</div>
</div>
</div>
</div>
</div>
Мне не нравится несколько ng-repeat
.
Как переделать код?
Чтобы создать узлы DOM для всех дочерних элементов treeView рекурсивно, вы можете создать новый компонент.
Пример использования:
<your-directive elements="vm.elements"></your-directive>
Код компонента:
angular.module('yourApp')
.component('yourDirective', {
templateUrl: 'template.html',
bindings: {
elements: '='
},
bindToController: true,
controllerAs: 'vm'
});
Шаблонный код:
<div ng-repeat="element in vm.elements">
<your-directive ng-if="vm.elements.children.length > 0" elements="vm.elements"></your-directive>
</div>
Примечание. Я не тестировал этот код, но с небольшим мастерингом вы должны заставить это работать.
ng-repeat="element in treeview.children.children.children.children.children"
?<div ng-repeat='element5 in element4.children'></div>
??