-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.js
121 lines (112 loc) · 3.77 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
var app = angular.module('plunker', []);
function Choice(name, children) {
this.name = name;
this.checked = false;
this.children = children || [];
}
var apparel = new Choice('Apparel', [
new Choice('Mens Shirts', [
new Choice('Mens Special Shirts')
]),
new Choice('Womens Shirts'),
new Choice('Pants')
]);
var boats = new Choice('Boats');
app.controller('MainCtrl', function($scope) {
$scope.myTree = [apparel, boats];
});
app.directive('choiceTree', function() {
return {
template: '<ul><choice ng-repeat="choice in tree"></choice></ul>',
replace: true,
transclude: true,
restrict: 'E',
scope: {
tree: '=ngModel',
withchildren: '=withchildren',
singleselect: '=singleselect'
},
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {},
post: function postLink(scope, iElement, iAttrs, controller) {
console.log(scope);
scope.choiceClass = function(choice){
return choice.show?"ui-show":"ui-hide";
};
}
};
}
};
});
app.directive('choice', function($compile) {
var link = function(scope, elm, attrs) {
scope.nodeicon = function(nr){
var c;
if(nr>0){
c = "dynatree-expander";
// http://plunker.no.de/edit?live=preview
} else {
c = "dynatree-connector";
}
return c;
};
scope.choiceClicked = function(choice) {
choice.checked = !choice.checked;
//if(scope.singleselect === true) choice.checked = true; //WTF, how to get always select with singleselect?
var choiceorig = choice.checked;
function unselectAll(c) {
choice.checked = false;
var parent;
if(scope.$parent) parent = scope.$parent;
while(parent.$parent.tree || parent.$parent.choice) parent = parent.$parent;
angular.forEach(parent.tree, function(c) {
c.checked = false;
checkChildren(c);
});
}
function checkChildren(c) {
angular.forEach(c.children, function(c) {
c.checked = choice.checked;
checkChildren(c);
});
}
if(scope.withchildren === true) {
if(scope.singleselect === true) {
unselectAll(choice);
choice.checked = choiceorig;
}
checkChildren(choice);
} else if(scope.singleselect === true) {
unselectAll(choice);
choice.checked = choiceorig;
}
};
scope.choiceShowHide = function(choice){
choice.show = !choice.show;
};
//Add children by $compiling and doing a new choice directive
if (scope.choice.children.length > 0) {
var childChoice = $compile('<choice-tree ng-model="choice.children" withchildren="withchildren" singleselect="singleselect" ng-class="choiceClass($parent.choice)"></choice-tree>')(scope, function(clonedElement, scope) {
elm.find('li').append(clonedElement);
});
}
};
return {
restrict: 'E',
//In the template, we do the thing with the span so you can click the
//text or the checkbox itself to toggle the check
// http://jsfiddle.net/3N5y9/2/
template: '<li>' +
'<span ng-class="{\'dynatree-exp-edl\': choice.show}"><span ng-click="choiceShowHide(choice);" ng-class="nodeicon(choice.children.length)"></span>'+
'<input type="checkbox" ng-checked="choice.checked" ng-click="choiceClicked(choice)"> {{choice.name}}' +
'</span></li>',
transclude: true,
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {},
post: link
};
}
};
});