Skip to content

Commit f2fefde

Browse files
Ben RubinBen Rubin
Ben Rubin
authored and
Ben Rubin
committed
made initial selections work
1 parent aa593e7 commit f2fefde

File tree

5 files changed

+67
-57
lines changed

5 files changed

+67
-57
lines changed

‎docsApp/pages/home/home.controller.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ angular
55

66
function HomeController($scope) {
77
var vm = this;
8+
vm.selectedItems = [];
89

910
vm.locationData = [
1011
{
@@ -36,6 +37,26 @@ function HomeController($scope) {
3637
id: 2,
3738
name: 'Item two',
3839
price: '12.00'
40+
},
41+
{
42+
id: 3,
43+
name: 'Item Three',
44+
price: '12.00'
45+
},
46+
{
47+
id: 4,
48+
name: 'Item Four',
49+
price: '12.00'
50+
},
51+
{
52+
id: 5,
53+
name: 'Item Five',
54+
price: '12.00'
55+
},
56+
{
57+
id: 6,
58+
name: 'Item Six',
59+
price: '12.00'
3960
}
4061
]
4162
},

‎docsApp/pages/home/home.html‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
1-
<md-tree>
2-
<md-branch branch-repeat="location in vm.locationData" class="md-2-line" select>
3-
<div class="md-branch-text">
4-
<h3>{{location.name}}</h3>
5-
<p>Location</p>
6-
</div>
7-
8-
<md-branch branch-repeat="menu in location.menus" class="md-2-line">
1+
<div layout="row">
2+
<md-tree ng-model="vm.selectedItems" flex>
3+
<md-branch branch-repeat="location in vm.locationData" class="md-2-line" select>
94
<div class="md-branch-text">
10-
<h3>{{menu.name}}</h3>
11-
<p>Menu</p>
5+
<h3>{{location.name}}</h3>
6+
<p>Location</p>
127
</div>
138

14-
<md-branch branch-repeat="item in menu.items" class="md-2-line">
9+
<md-branch branch-repeat="menu in location.menus" class="md-2-line">
1510
<div class="md-branch-text">
16-
<h3>{{item.name}}</h3>
17-
<p>Item</p>
11+
<h3>{{menu.name}}</h3>
12+
<p>Menu</p>
1813
</div>
14+
15+
<md-branch branch-repeat="item in menu.items" class="md-2-line">
16+
<div class="md-branch-text">
17+
<h3>{{item.name}}</h3>
18+
<p>Item</p>
19+
</div>
20+
</md-branch>
1921
</md-branch>
2022
</md-branch>
21-
</md-branch>
22-
</md-tree>
23+
</md-tree>
2324

25+
<div style="width: 420px; padding: 0 16px; border-left: 1px solid #ccc; height: 100%;">
26+
<h3>Selected Items ({{vm.selectedItems.length}})</h3>
27+
<p ng-repeat="item in vm.selectedItems">{{item.name}}</p>
28+
</div>
29+
</div>
2430

2531

2632
<!-- <md-list>

‎src/js/branch.js‎

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function branchDirective($parse, $document, $compile) {
1919
return {
2020
restrict: 'E',
2121
multiElement: true,
22-
require: ['mdBranch', '?^mdBranch', '?^^mdTree', '?^mdBranchTemplates'],
22+
require: ['mdBranch', '?^mdBranch', '?^mdTree', '?^mdBranchTemplates'],
2323
priority: 1000,
2424
terminal: true,
2525
transclude: 'element',
@@ -47,7 +47,6 @@ function branchDirective($parse, $document, $compile) {
4747
var itemsLength = 0;
4848
var isUpdating = false;
4949
var ctrl = ctrls[0];
50-
ctrl.treeCtrl = ctrls[2];
5150
var parentBranchCtrl = ctrls[1];
5251
if (isOpen) { startWatching(); }
5352

@@ -65,6 +64,12 @@ function branchDirective($parse, $document, $compile) {
6564
ctrl.killWatching = killWatching;
6665
ctrl.setOpenState(isOpen);
6766

67+
// add tree controller and register if available
68+
if (ctrls[2]) {
69+
ctrl.treeCtrl = ctrls[2];
70+
ctrl.registerBranch();
71+
}
72+
6873

6974
function updateBranch(newItems, oldItems) {
7075
if (isUpdating) { return; }
@@ -84,11 +89,7 @@ function branchDirective($parse, $document, $compile) {
8489
lengthChanged = true;
8590
itemsLength = _itemsLength;
8691
}
87-
8892
items = newItems;
89-
// if (newItems !== oldItems || lengthChanged === true) {
90-
// // update indexes
91-
// }
9293

9394

9495
// Detach and pool any blocks that are no longer in the viewport.
@@ -103,16 +104,8 @@ function branchDirective($parse, $document, $compile) {
103104
i += 1;
104105
}
105106

106-
// // Collect blocks at the top.
107-
i = 0;
108-
// while (i < itemsLength && (blocks[i] === null || blocks[i] === undefined)) {
109-
// _block = getBlock(i);
110-
// updateBlock(_block, i);
111-
// newBlocks.push(_block);
112-
// i += 1;
113-
// }
114-
115107
// Update blocks that are already rendered.
108+
i = 0;
116109
while ((blocks[i] !== null && blocks[i] !== undefined)) {
117110
updateBlock(blocks[i], i);
118111
i += 1;
@@ -128,22 +121,12 @@ function branchDirective($parse, $document, $compile) {
128121
}
129122

130123
// Attach collected blocks to the document.
131-
// if (newBlocks.length) {
132-
// parentNode.insertBefore(
133-
// domFragmentFromBlocks(newBlocks),
134-
// element[0].nextSibling);
135-
// }
136124
if (newBlocks.length) {
137125
element[0].parentNode.insertBefore(
138126
domFragmentFromBlocks(newBlocks),
139127
blocks[maxIndex] && blocks[maxIndex].element[0].nextSibling);
140128
}
141129

142-
// notfiy parent their are no child elements
143-
if (itemsLength === 0 && parentBranchCtrl) {
144-
// parentBranchCtrl.disableArrow();
145-
}
146-
147130
isUpdating = false;
148131
}
149132

@@ -273,6 +256,7 @@ function branchController($scope, $mdUtil, $animateCss) {
273256
// vm.killWatching; set in link function
274257
vm.setOpenState = setOpenState;
275258
vm.setSelected = setSelected;
259+
vm.registerBranch = registerBranch;
276260

277261
if (!$element) { return; }
278262
var arrow = $element[0].querySelector('.md-branch-icon');
@@ -285,19 +269,16 @@ function branchController($scope, $mdUtil, $animateCss) {
285269
$scope.$on('$destroy', function () {
286270
// tree controller may not exist if branch was never opened
287271
if (vm.treeCtrl) {
288-
vm.treeCtrl.unregisterBranch(vm.treeCtrl.hashGetter(vm));
272+
vm.treeCtrl.unregisterBranch(vm.treeCtrl.hashGetter($scope[$scope.repeatName]));
289273
}
290274
});
291275

292276
// register branch if tree controller is accesable
293-
if (vm.treeCtrl) {
294-
registerBranch();
295-
}
296277
function registerBranch() {
297-
vm.treeCtrl.registerBranch(vm.treeCtrl.hashGetter(vm), {
278+
vm.treeCtrl.registerBranch(vm.treeCtrl.hashGetter($scope[$scope.repeatName]), {
298279
setSelected: setSelected
299280
});
300-
setSelected(vm.treeCtrl.selected[vm.treeCtrl.hashGetter(vm)] !== undefined);
281+
setSelected(vm.treeCtrl.selected[vm.treeCtrl.hashGetter($scope[$scope.repeatName])] !== undefined);
301282
}
302283

303284

@@ -313,7 +294,7 @@ function branchController($scope, $mdUtil, $animateCss) {
313294
var isSelect = $element.attr('select') !== undefined;
314295
if (isSelect && branchContainsElement(e.target)) {
315296
var selected = $element.attr('selected') !== undefined;
316-
vm.treeCtrl.toggleSelect(selected, vm.treeCtrl.hashGetter(vm), $scope[$scope.repeatName]);
297+
vm.treeCtrl.toggleSelect(!selected, vm.treeCtrl.hashGetter($scope[$scope.repeatName]), $scope[$scope.repeatName]);
317298

318299
$element.attr('selected', !selected);
319300
if (e.target.classList.contains('md-container')) { // clicked on checkbox
@@ -458,6 +439,6 @@ function branchController($scope, $mdUtil, $animateCss) {
458439

459440
// set select state
460441
function setSelected(isSelected) {
461-
$element.attr('selected', isSelected);
442+
if ($element) { $element.attr('selected', isSelected); }
462443
}
463444
}

‎src/js/tree.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ function treeDirective($mdTheming, $mdUtil) {
1919

2020
// make ngModel available to controller
2121
var ngModelCtrl = ctrls[1];
22+
23+
// create fake ngModel so code runs as normal
2224
if (!ngModelCtrl) {
2325
ngModelCtrl = $mdUtil.fakeNgModel();
24-
ngModelCtrl.$validators = [];
25-
ngModelCtrl.$setPristine = angular.noop;
26+
ngModelCtrl.$validators = []; //$mdUtil.fakeNgModel is missing `$validators`
2627
}
2728
ctrls[0].init(ngModelCtrl, attr.ngModel);
2829
};
@@ -49,7 +50,6 @@ function treeDirective($mdTheming, $mdUtil) {
4950

5051
$scope.$watchCollection(binding, function(value) {
5152
if (validateArray(value)) { modelRender(value); }
52-
vm.ngModel.$setPristine();
5353
});
5454

5555
ngModel.$isEmpty = function(value) {
@@ -87,11 +87,11 @@ function treeDirective($mdTheming, $mdUtil) {
8787

8888

8989
function registerBranch(hashKey, ctrl) {
90-
if (branches[branch] !== undefined) {
91-
console.error('This branch was already registered, ignoring.');
90+
if (branches[hashKey] !== undefined) {
91+
console.warn('This branch was already registered, ignoring.');
9292
return;
9393
}
94-
branches[branch] = ctrl;
94+
branches[hashKey] = ctrl;
9595
}
9696

9797
function unregisterBranch(hashKey) {
@@ -119,10 +119,12 @@ function treeDirective($mdTheming, $mdUtil) {
119119
function deselect(hashKey) {
120120
var branch = branches[hashKey];
121121
if (branch !== undefined) { branch.setSelected(false); }
122+
vm.selected[hashKey] = undefined;
122123
delete vm.selected[hashKey];
123124
}
124125

125126
function refreshViewValue() {
127+
console.log('refreshViewValue', vm.selected)
126128
var branchValue;
127129
var newValue;
128130
var prevValue;
@@ -131,7 +133,7 @@ function treeDirective($mdTheming, $mdUtil) {
131133
var hashKey = hashKeys.pop();
132134

133135
while (hashKey !== undefined) {
134-
branchValue = branches[hashKey];
136+
branchValue = vm.selected[hashKey];
135137
if (branchValue) {
136138
values.push(branchValue);
137139
}
@@ -141,7 +143,7 @@ function treeDirective($mdTheming, $mdUtil) {
141143

142144
newValue = values;
143145
prevValue = vm.ngModel.$modelValue;
144-
if (!angular.equals(prevValue, newValue)) {
146+
if (prevValue !== newValue) {
145147
vm.ngModel.$setViewValue(newValue);
146148
vm.ngModel.$render();
147149
}

‎src/style-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ md-tree {
1414
}
1515

1616
.md-branch-icon svg {
17-
fill: '{{foreground-4}}';
17+
fill: #fff;
1818
}
1919
}
2020

0 commit comments

Comments
 (0)