select angular-ivh-treeview 中的节点时检查所有父节点

Question

我想用angular-ivh-treeview如何。这个 sample 我想用。但是这个示例对我来说有一个问题，当我 select 一个节点没有 select 所有父节点时。怎么修？

Answer 1

你至少有几个选择。您可以创建一个自定义模板并监听复选框点击，然后：获取被点击节点的父节点并更新它们的选定状态，或者发出一个事件告诉父节点更改它们的选定状态。

这是前一种解决方案的示例：http://jsbin.com/cegipa/6/edit?html,js,output

请注意，单击子节点时，其父节点会更新以匹配其新状态。这是通过使用以下模板完成的：

<span ivh-treeview-twistie></span>
</span>
<input type="checkbox" select-parents ng-model="node.selected">
<span class="ivh-treeview-node-label" ivh-treeview-toggle>
  {{trvw.label(node)}}
</span>
<div ivh-treeview-children></div>

将此指令附加到复选框：

app.directive('selectParents', function(ivhTreeviewBfs) {
  return {
    link: function(scope, element, attrs) {
      element.on('click', function() {
        var n = scope.node;
        ivhTreeviewBfs(stuff, function(node, parents) {
          if(n === node) {
            angular.forEach(parents, function(p) {
              p.selected = n.selected;
            });
            return false;
          }
        });
        scope.$apply();
      });
    }
  };
});

并且您可以通过传递事件来做类似的事情（并且可能更有效）。

select angular-ivh-treeview 中的节点时检查所有父节点

check all parent when select a node in angular-ivh-treeview

javascript

treeview

angularjs