angular-ui-tree

来源：互联网发布：网络摄像头一天多少g 编辑：程序博客网时间：2024/06/06 08:47
<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",                        "nodes": []                    }                ]            },            {                "id": 3,                "title": "node3",                "nodes": [                    {                        "id": 31,                        "title": "node3.1",                        "nodes": []                    }                ]            }        ];    });    // 页面加载完成后,再加载模块    angular.bootstrap(document,["MyApp"]);</script>
阅读全文
0 0