Angular js选择父级和子级值

Question

我正尝试通过以下方式获得结果，请任何专家输入来实现！

预期工作流程图，

这是默认视图，

方案1：当单击数字“ 1”时，从左到右，孩子们需要如下所示突出显示

方案2：考虑方案1的结果，请从左到右单击数字“ 3”，子级需要删除如下所示的突出显示，因为3被我们视为父级/根级，< / p>

方案3：考虑默认视图，默认情况下没有选择当单击数字“ 18”时，所有父值都需要如下所示突出显示，

方案4：考虑方案3的结果，当仅对18单击数字“ 18”时，需要删除高亮显示，如下所示，不需要从右到左父级取消选择任何值。

注意：对于任何值，都不需要从右到左取消父级选择。

以下是代码：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: understanding a recursive directive

请参阅该链接中的答案以获取逻辑解释。从那里我只需要进行事件$ 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>