Highlight values angularjs

Question

I would like to get the results like the following manner,

Expected work flow chart,

Here the default view,

Scenario 1: When click on the number "1" all the left to right and children need to highlight like the below,

Scenario 2: Considering the scenario 1 results, click on the number "3" all the left to right and children need to remove highlight like the below since 3 we consider as parent/root,

Scenario 3: Considering the default view, By default there is no selection When click on the number "18" all the parent values need to highlight like the below,

Scenario 4: Considering the Scenario 3 results , When click on the number "18" only for 18 the highlight need to be removed and like the below, Right to left parent level deselection not required for any value.

Note: While clicking on any value Right to left parent level deselection not required. In this case only clicked value need to remove highlight.

Here 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);

             } 

             }

        }


    }

});

Answer 1

Html

<table>
    <tr ng-repeat="checkbox in groupOfCheckboxes track by $index" ng-init="rowId = $index">
        <td ng-repeat="data in checkbox.RowValues track by $index" ng-init="vId = $index">
            <span ng-if="data.show" ng-click="setBinary(rowId,vId,data)"
                ng-class="data.isActive ? 'active' : ''">{{data.td}}</span>
        </td>
    </tr>
</table>

Controller

    $scope.groupOfCheckboxes = [
    {
        Row: "1",
        RowValues: [
            { td: "1", show: true },
            { td: "2", show: true },
            { td: "3", show: true },
            { td: "4", show: true },
            { td: "5", show: true }
        ]
    },
    {
        Row: "2",
        RowValues: [
            { td: "6", show: false },
            { td: "7", show: false },
            { td: "8", show: false },
            { td: "9", show: true },
            { td: "10", show: false }
        ]
    },
    {
        Row: "3",
        RowValues: [
            { td: "11", show: false },
            { td: "12", show: false },
            { td: "13", show: true },
            { td: "14", show: true }
        ]
    },
    {
        Row: "4",
        RowValues: [
            { td: "15", show: false },
            { td: "16", show: false },
            { td: "17", show: false },
            { td: "18", show: true }
        ]
    }
];

// Setting Parents
for (let rowIndex = $scope.groupOfCheckboxes.length - 1; rowIndex >= 0; rowIndex--) {
    for (let valIndex = $scope.groupOfCheckboxes[rowIndex].RowValues.length - 1; valIndex >= 0; valIndex--) {
        $scope.groupOfCheckboxes[rowIndex].RowValues[valIndex].isActive = false;
        if ($scope.groupOfCheckboxes[rowIndex].RowValues[valIndex].show == true) {
            loop4:
            for (let rx = rowIndex; rx >= 0; rx--) {
                for (let vx = valIndex - 1; vx >= 0; vx--) {
                    if ($scope.groupOfCheckboxes[rx].RowValues[vx].show == true) {
                        $scope.groupOfCheckboxes[rowIndex].RowValues[valIndex].pri = rx;
                        $scope.groupOfCheckboxes[rowIndex].RowValues[valIndex].pvi = vx;
                        break loop4;
                    };
                }
            }
        };
    }
}
$scope.setBinary = function (rowId, vId, data) {
    data.isActive = !data.isActive
    bool = data.isActive;
    loopx:
    for (let row = rowId; row < $scope.groupOfCheckboxes.length; row++) {
        loop1:
        for (let v = vId; v < $scope.groupOfCheckboxes[row].RowValues.length; v++) {
            if (row == rowId) {
                if ($scope.groupOfCheckboxes[row].RowValues[v].show == true) {
                    $scope.groupOfCheckboxes[row].RowValues[v].isActive = bool;
                } else {
                    break;
                };
            } else {
                if (v == vId) {
                    if ($scope.groupOfCheckboxes[row].RowValues[v].show == true) {
                        break loopx;
                    }
                } else {
                    if ($scope.groupOfCheckboxes[row].RowValues[v].show == true) {
                        $scope.groupOfCheckboxes[row].RowValues[v].isActive = bool;
                    }
                }
            }
        }
    }
    function rec(pri, pvi) {
        if ($scope.groupOfCheckboxes[pri]) {
            $scope.groupOfCheckboxes[pri].RowValues[pvi].isActive = true;
            x = $scope.groupOfCheckboxes[pri].RowValues[pvi]
            rec(x.pri, x.pvi)
        }
    }
    rec(data.pri, data.pvi)
}