<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">

<script src="js/angular.js"></script>
<script src="js/angular-ui-tree.js"></script>

<script type="text/ng-template" id="nodes_renderer">
    <div ui-tree-handle class="tree-node tree-node-content">
        <a class="btn btn-success btn-xs " ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
    <span class="glyphicon"  ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span></a>
        {{node.title}}
    </div>
    <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
        <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer'">
        </li>
    </ol>
</script>
<div ng-controller="MyController">
    <div ui-tree id="tree-root" class="ng-scope angular-ui-tree" data-drag-enabled="false">
        <ol ui-tree-nodes ng-model="data" class="ng-pristine ng-untouched ng-valid ng-scope angular-ui-tree-nodes">
            <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer'" class="ng-scope angular-ui-tree-node" collapsed="false">
            </li>
        </ol>
    </div>
</div>
<script>
    var myAppModule = angular.module('MyApp',['ui.tree']);
    myAppModule.controller('MyController',function($scope) {
        $scope.treeOptions = {
            accept: function(sourceNodeScope,destNodesScope,destIndex) {
                return true;
            }
        }
        $scope.data = [
            {
                "id": 1,"title": "node1","nodes": [
                    {
                        "id": 11,"title": "node1.1","nodes": [
                            {
                                "id": 111,"title": "node1.1.1","nodes": []
                            }
                        ]
                    },{
                        "id": 12,"title": "node1.2","nodes": []
                    }
                ]
            },{
                "id": 2,"title": "node2","nodrop": true,"nodes": [
                    {
                        "id": 21,"title": "node2.1","nodes": []
                    },{
                        "id": 22,"title": "node2.2",{
                "id": 3,"title": "node3","nodes": [
                    {
                        "id": 31,"title": "node3.1","nodes": []
                    }
                ]
            }
        ];
    });
    // 页面加载完成后,再加载模块  angular.bootstrap(document,["MyApp"]);
</script>