I'm building a nested tree and using AngularJS input type checkboxes in all the leaves. Most of the examples I've seen use ng-repeat over a single list, bind the model to the list item, and then get the selected values.
But the items in my tree are all in different lists so I'm not sure how to bind them to the same model. What other ways are there or what solution is there to getting all the checked items without them being in the same model?
An example of the data I'm using, a leaf would be a node without any children:
[{
'Name': 'A',
'Children': [{
'Name': 'AA',
'Children': []},
'Name': 'AB',
'Children': [{
'Name': 'ABA'
'Children': []
}],
'Name': 'B',
'Children': [{
'Name': 'BA',
'Children': [{
'Name': 'BAA',
'Children': []
}]
}]
}]
I'm using Angular UI Tree for my tree and the basic markup looks something like this:
<script type="text/ng-template" id="tree.html">
<div ui-tree-handle class="tree-node tree-node-content">
<input data-ng-show="{{node.Children.length == 0}}"
type="checkbox"
data-ng-model="node.selected">
<span class="tree-node">
{{node.Name}}
</span>
</div>
<ol ui-tree-nodes data-ng-model="node.Children">
<li ng-repeat="node in node.Children"
ui-tree-node
ng-include="'tree.html'">
</li>
</ol>
</script>
<div ui-tree=""
id="tree-root">
<ol ui-tree-nodes ng-model="treeList">
<li ng-repeat="node in treeList"
ui-tree-node
ng-include="'tree.html'"></li>
</ol>
</div>
In this example I'm binding the checkbox to a node.selected attribute in the node. But then to find all the selected nodes I would have to traverse my entire tree and check if each node is selected. Since my tree is quite big this would be unfeasible, is there another way to do it?
