Angular js Выбрать родительские и дочерние значения

Question

Я пытаюсь получить результаты, как показано ниже, Любые экспертные данные, пожалуйста, чтобы достичь этого!

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

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

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

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

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

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

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

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

Я не пробовал с логикой из вашего JSFiddle, но вместо этого это вдохновлено в этом ответе: Angularjs: понимание рекурсивной директивы

Пожалуйста, обратитесь к ответам вэта ссылка для объяснения логики.Оттуда мне просто потребовались события $ emit и $ broadcast, чтобы можно было указывать родителям или детям, чтобы они обновляли соответственно

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>