突出显示值 angularjs

Question

我想像下面这样得到结果，

预期工作流程图，

这里是默认视图，

场景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)
}