My goal is to achieve results in the following manner:
Expected workflow chart:
https://i.stack.imgur.com/G2OAO.png
Here is the default view:
https://i.stack.imgur.com/H6xkZ.png
Scenario 1: When I click on the number "1", all elements from left to right and their children should be highlighted as shown below:
https://i.stack.imgur.com/3L8h2.png
Scenario 2: Building on Scenario 1, if I click on the number "3", all elements from left to right and their children should have their highlight removed since "3" is considered the parent/root element:
https://i.stack.imgur.com/qQoQP.png
Scenario 3: Starting from the default view with no selection, clicking on the number "18" should highlight all parent values as shown below:
https://i.stack.imgur.com/4H3hs.png
Scenario 4: Following Scenario 3, clicking on the number "18" should only remove the highlight for "18" specifically, without deselecting parent levels on the right side:
https://i.stack.imgur.com/3y4OT.png
Note: When clicking on any value, deselection of parent levels on the right is not required. Only the clicked value should lose its highlight.
Below is the code: JSFiddle
$scope.setActiveSelectedItem = function() {
return $scope.groupOfCheckboxes[i].RowValues[j].isActive = !$scope.groupOfCheckboxes[i].RowValues[j].isActive;
}
$scope.setActivePrevNext = function(arr, id) {
let keys = Object.keys(arr);
let nextIndex = keys.indexOf(id) +1;
let nextItem = keys[nextIndex];
return $scope.groupOfCheckboxes[i].RowValues[nextIndex].isActive = !$scope.groupOfCheckboxes[i].RowValues[nextIndex].isActive;
}
$scope.setBinary = function (id) {
for(i=0; i<$scope.groupOfCheckboxes.length; i++) {
for(j=0; j<$scope.groupOfCheckboxes[i].RowValues.length; j++) {
if($scope.groupOfCheckboxes[i].RowValues[j].td == id) {
$scope.setActiveSelectedItem();
$scope.setActivePrevNext($scope.groupOfCheckboxes, id);
}
}
}
}
});