angular-ui-tree
发布时间:2020-12-17 09:18:56 所属栏目:安全 来源:网络整理
导读: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-
<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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |