1- # angular-ui-tree
2- It is a angular directive of tree.
1+ # Angular-UI-Tree
32
4- ## two way binding
5- "Native" directive of tree mean the ui and data is directly two way binding. Not like others are based on JQuery tree plugins.
3+ ## use your own data struct
64
7- ## template customize
8- You can customize the presenation of tree ui, just add or edit the template.
5+ This uiTree not require you to convert your data to some specific struct.
96
7+ ## two way data-binding
108
9+ "Native" directive of tree mean the ui and data is directly two way binding. Not like others are based on jQuery tree plugins.
10+
11+ ## dom customize
12+
13+ You can customize the presenation of tree ui, just create your own dom and add three attributes to make a uiTree.
1114
12- # Angular-UI-Tree
1315
1416### 简介
1517
@@ -30,13 +32,16 @@ You can customize the presenation of tree ui, just add or edit the template.
3032<ul ui-tree="treeSource">
3133 <li node="item" id="{{item.id}}">
3234 <span>{{item.name}}</span>
33- <button ng-show="item.children" ng-click="toggle(item);$event.stopPropagation(); ">open</button>
35+ <button ng-show="item.children" ng-click="toggle(item);">open</button>
3436 <ul node-children="item.children" ng-show="item.isOpen"></ul>
3537 </li>
3638</ul>
3739```
3840
3941```
42+ // you control your own data struct
43+ // that mean if there is a 'x' field in you model
44+ // you can just use {{your_variable_name.x}} in the dom
4045$scope.treeSource = [
4146 { id: 1, name: 'jack' },
4247 { id: 2, name: 'ivan', children: [ { id: 3, name: 'ivan`s son' }, { id: 4, name: 'ivan`s daughter' } ] }
@@ -45,4 +50,4 @@ $scope.treeSource = [
4550$scope.toggle = function(item) {
4651 item.isOpen = !item.isOpen;
4752};
48- ```
53+ ```
0 commit comments