Angular 树视图中的复选框

Question

我找不到一个非常合适的指令来从 JSON 结构中创建带有复选框的树视图，所以我用一个自调用迭代器来做到这一点，如下所示：

现在，我遇到的唯一问题是（查看第 40 行的 'Jeans' 数据，这是：

"chk": true,

这当然会标记 "Jeans"-复选框，但不会标记上面的复选框。这些值将从数据库中得到正确的（即使上面的分支也会有 chk = true，但我仍然很好奇如果一个项目被标记为 "true" 如何触发初始 "bubble up and mark all the parents as checked" .

有人可以帮助我了解如何做到这一点吗？

非常感谢！

克里斯托夫

Answer 1

我将以类似于您的 setData 函数的递归方式预处理树数据：

 function initTree(tree) {
   function processNode(node) {
     angular.forEach(node.children, function(child) {
       if(processNode(child) === true) {
         node.chk = true;   
       }
     });

     return node.chk;
   }

   angular.forEach(tree, processNode);
 };
 initTree($scope.tree);

查看更新 fiddle http://jsfiddle.net/65yucqge/

编辑这是另一个 fiddle 显示如何将复选框数据放入数组中的方法： http://jsfiddle.net/tmakin/kmhw1ue0/

Angular 树视图中的复选框

Angular checkboxes in tree view

javascript

angularjs

recursion

checkbox

tree