今天为大家介绍下angular-ui-tree的使用方法,它是一个不依赖于jquery 的angualrJS UI,友好的外观,方便的操作,是它最大的优势。
angular-ui-tree有如下特点:
1.使用本地AngularJS范围数据绑定
2.整个树都可以进行排序和移动项目
3.防止上级节点创建子节点
废话不多说,下面上效果图
拖拽效果:
节点的添加
官方DEMO:http://angular-ui-tree.github.io/angular-ui-tree/
angular-ui-tree 下载地址: https://github.com/angular-ui-tree/angular-ui-tree
前端使用代码如下:
index.js
1、 载入angular-ui-tree.css 和 angular-ui-tree.js
2、module中加入依赖
使用页面中的代码
html
<script type="text/ng-template" id="angularTreeTemplate">
<div ui-tree-handle class="tree-node tree-node-content angular-ui-tree-handle">
<a class="btn btn-success btn-xs" ng-if="item.children && item.children.length > 0" data-n