Выделить значения angularjs

Question

Я хотел бы получить результаты, как показано ниже,

Ожидаемая схема работы,

Здесь по умолчаниюview,

Сценарий 1: При нажатии на цифру «1» все слева направо и дети должны выделитькак показано ниже,

Сценарий 2: Принимая во внимание результаты сценария 1, нажмите на цифру «3» все слевасправа и детям нужно убрать выделение, как показано ниже, так как 3 мы считаем родителем / корнем,

Сценарий 3: Учитывая вид по умолчанию, По умолчанию выбор отсутствует. При нажатии на число «18» необходимо выделить все родительские значения, как показано ниже:

Сценарий 4: Принимая во внимание результаты Сценария 3, Если щелкнуть число «18» только для 18, необходимо убрать выделение, как показано ниже, справа налевоОтмена родительского уровня не требуется для любого значения.

Примечание : при нажатии на любое значение Отмена выбора родительского уровня справа налево нетребуется.В этом случае только выделенное значение необходимо убрать подсветкой.

Вот код: 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>

Контроллер

    $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)
}