AngularJS UI Tree - Single header for entire tree

98 views Asked by At

I'm using AngularJS UI Tree on my PUG template, and I need the first node to act like a header for the rest of the other nodes, which will be inside this header.

Currently I'm doing it like this:

div(data-ng-controller="CategoryTreeController as ctController")
    div.tree-root(ui-tree="")

        // Header
        ol(ui-tree-nodes="" ng-model='ctController.header')
            li(ng-repeat="header in ctController.header" ui-tree-node="")
                div(ui-tree-handle) {{header}}

                // Categories (Child nodes of Header)
                ol(ui-tree-nodes="" ng-model='ctController.categories')
                    li(ng-repeat="category in ctController.categories" ui-tree-node="")
                        div(ui-tree-handle) {{category}}

As you can see, I'm wrapping my header on my controller in an array, like this: _self.header = [$scope.categoriesHeader]; and passing it to my ng-model and ng-repeat.

Is there a cleaner solution without the use of ng-repeat (since it will always be a single header), and so I can still use the header as the first node of my tree?

0

There are 0 answers