AngularJS 嵌套列表

controller

.controller('addQaCtrl', function ($scope) {
$scope.buttonStatus = function (item) {
if (item.items.length) {
return  item.expanded ? 'expand_less' : 'expand_more';
} else {
return 'block';
}
};
$scope.items = [{
title: '1',
items: [{title: '1.1', items:[{title: '1.1.1', items:[]}]}]
}, {
title: '2',
items: [{title: '2.1', items: []}]
}, {
title: '3',
items: []
}];
$scope.toggleItems = function(item) {
if (item.items) {
if (Array.isArray(item.items)) {
item.expanded = !item.expanded;
}
} else {
item.expanded = true;
}
};
});

HTML

<script type="text/ng-template" id="treeview.html">
<md-list-item>
<md-button class="material-icons" ng-click="toggleItems(item)" ng-disabled="!item.items.length">
{{buttonStatus(item)}}
</md-button>
<p>{{ item.title }}</p>
</md-list-item>
<md-list flex ng-if="item.items.length" ng-show="item.expanded" style="padding: 20px">
<div ng-repeat="item in item.items" ng-include="'treeview.html'"></div>
</md-list>
</script>
<md-content flex class="md-padding">
<md-list>
<div ng-repeat="item in items" ng-include="'treeview.html'"></div>
</md-list>
</md-content>

style="padding: 20px"