1
- # angular-ui-tree
2
- It is a angular directive of tree.
1
+ # Angular-UI-Tree
3
2
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
6
4
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.
9
6
7
+ ## two way data-binding
10
8
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.
11
14
12
- # Angular-UI-Tree
13
15
14
16
### 简介
15
17
@@ -30,13 +32,16 @@ You can customize the presenation of tree ui, just add or edit the template.
30
32
<ul ui-tree="treeSource">
31
33
<li node="item" id="{{item.id}}">
32
34
<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>
34
36
<ul node-children="item.children" ng-show="item.isOpen"></ul>
35
37
</li>
36
38
</ul>
37
39
```
38
40
39
41
```
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
40
45
$scope.treeSource = [
41
46
{ id: 1, name: 'jack' },
42
47
{ id: 2, name: 'ivan', children: [ { id: 3, name: 'ivan`s son' }, { id: 4, name: 'ivan`s daughter' } ] }
@@ -45,4 +50,4 @@ $scope.treeSource = [
45
50
$scope.toggle = function(item) {
46
51
item.isOpen = !item.isOpen;
47
52
};
48
- ```
53
+ ```
0 commit comments