Angular js选择父级和子级值

Question

I'm trying to get the results like the following manner, Any expert inputs please to achieve this!

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: Right to left parent level deselection not required for any value.

Here is the code: JSFiddle

  $scope.setActivePrevNext = function (arr) {
        let c;
        arr.RowValues.forEach(e => {
            e.isActive = !e.isActive; c = e.isActive;
        });
        index = $scope.groupOfCheckboxes.findIndex(x => x.Row == arr.Row);
        childrenIndex = index + 1;
        if ($scope.groupOfCheckboxes[childrenIndex] !== undefined) {
            $scope.groupOfCheckboxes[childrenIndex].RowValues.forEach(e => {
                e.isActive = c;
            })
        };
    }
    $scope.setBinary = function (id) {
        $scope.groupOfCheckboxes.forEach(e => {
            e.RowValues.forEach(item => {
                if (item.td == id) $scope.setActivePrevNext(e);
            })
        });
    }

Answer 1

I did not give it a try with the logic from your JSFiddle, but instead this is inspired in this answer: Angularjs: understanding a recursive directive

Please refer to the answers in that link for explanation of the logic. From there I just had to had event $emit and $broadcast to be able to tell parents or children scopes to update accordingly

 var module = angular.module('myapp', []); module.controller("TreeCtrl", function($scope) { $scope.treeFamily = { name: "1", children: [{ name: "2", children: [{ name: "3", children: [{ name: "4", children: [{ name: "5", children: [] }] }, { name: "9", children: [] }] }, { name: "13", children: [{ name: "14", children: [] }, { name: "18", children: [] }] }] }] }; }); module.directive("tree", function($compile) { return { restrict: "E", scope: { family: '=' }, template: '<div class="circleItem" ng-click="circleClicked()" ng-class="{highlight: isHighlighted}">{{ family.name }}</div>' + '<ul>' + '<li ng-repeat="child in family.children">' + '<tree family="child"></tree>' + '</li>' + '</ul>', compile: function(tElement, tAttr) { var contents = tElement.contents().remove(); var compiledContents; return function(scope, iElement, iAttr) { if (!compiledContents) { compiledContents = $compile(contents); } compiledContents(scope, function(clone, scope) { iElement.append(clone); }); }; }, controller: function($scope) { $scope.$on('event:changeColorOfParents', function(event, clickedCircleNumber) { if (clickedCircleNumber !== $scope.family.name) { $scope.isHighlighted = true; } }); $scope.$on('event:changeColorOfChildren', function(event, clickedCircleNumber) { if (clickedCircleNumber !== $scope.family.name) { $scope.isHighlighted = !$scope.isHighlighted; } }); $scope.circleClicked = function() { $scope.isHighlighted = !$scope.isHighlighted; $scope.$emit('event:changeColorOfParents', $scope.family.name); $scope.$broadcast('event:changeColorOfChildren', $scope.family.name); }; } }; }); 

 li { list-style: none; } tree { margin-left: 20px; display: block; } .circleItem { text-align: center; cursor: pointer; border: 1px solid black; border-radius: 50%; width: 25px; height: 25px; background: white; } .circleItem.highlight { background: red; } 

 <div ng-app="myapp"> <div ng-controller="TreeCtrl"> <tree family="treeFamily"></tree> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>