Angular js选择父子值答案

【问题标题】：Angular js Select Parent and Children ValuesAngular js选择父子值
【发布时间】：2019-03-05 09:47:03
【问题描述】：

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

预期工作流程图，

这里是默认视图，

场景1：当从左到右点击数字“1”，孩子需要像下面这样高亮，

场景2：考虑场景1的结果，从左到右点击数字“3”，孩子需要像下面这样删除突出显示，因为我们认为3是父/根，

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

【问题讨论】：

标签： javascript angularjs binary-tree

【解决方案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>

【讨论】：