I rolled my own solution on something similar. I can't remember why I didn't go with ui-tree. What I needed was a way to recursively create views so that I could mimic a filesystem. Here's the plunk from when I was proofing it out. This should be simpler for you since you're not trying to split files and folders like I did.
With the recursion helper I was able to declare my data structure like this:
$scope.items = [
new File('item1', '/item1', 11, false),
new File('item2', '/item2', 22, true),
new File('item3', '/item3', 33, false),
new File('A Really Long File Name Should Go Here', '/item4', 44, false),
new Folder('Folder 1', '/folder1', [new File('item5', '/item5', 55, false)], false)
];
And I could render it using this:
<table class="table table-condensed table-responsive">
<tbody>
<tr>
<th></th>
<th>Name</th>
<th>Size</th>
<th></th>
</tr>
<tr ng-repeat="item in getFiles()">
<td class="minWidth4px">
<input type="checkbox" ng-model="item.isSelected" />
</td>
<td class="truncateName">
{{item.name}}
</td>
<td class="minWidth4px">{{item.size}}mb</td>
<td ng-show="item.canPreview()" class="minWidth4px">
<button class="btn" ng-click="openPreview(item)">Preview</button>
</td>
</tr>
<tr ng-repeat="item in getFolders()" ng-click="openFolder(item)">
<td class="minWidth4px">
<i ng-show="item.isOpen" class="fa fa-folder-open-o"></i>
<i ng-hide="item.isOpen" class="fa fa-folder-o"></i>
</td>
<td colspan="3">
<label>{{item.name}}</label>
<attachments ng-show="item.isOpen" items="item.items"></attachments>
</td>
</tr>
</tbody>
</table>
And here's the directive for the attachements:
var attachmentsLink = function($scope) {
$scope.openFolder = function(folder) {
folder.isOpen = !folder.isOpen;
console.log(folder);
};
$scope.getFiles = function() {
return $scope.items.filter(function(x) {
return x instanceof File;
});
};
$scope.getFolders = function() {
return $scope.items.filter(function(x) {
return x instanceof Folder;
});
};
};
var attachmentsController = function($scope, previewService){
$scope.openPreview = function(file) {
previewService.preview = file;
previewService.showPreview = true;
};
};
var attachments = function(RecursionHelper) {
return {
compile: function(element) {
return RecursionHelper.compile(element, attachmentsLink);
},
controller: attachmentsController,
restrict: 'E',
scope: {
items:'=',
},
templateUrl: 'attachments.html'
};
};
angular.module("app").directive("attachments", attachments);
I can't take credit for the recursion helper that is the meat of it. The recursion helper is here Hope this helps.
