树视图中的角度复选框 [英] Angular checkboxes in tree view

问题描述

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

I could not find a really good suitable directive for creating a tree view with checkboxes from a JSON-structure, so I did this with a self-calling iterator, as seen here:

http://jsfiddle.net/u2ho9d3j/

现在，我遇到的唯一问题是(查看第 40 行的牛仔裤"数据，是这样的:

Now, the only problem I've got, is that (look at the 'Jeans' data in line 40, there's this:

"chk": true,

这当然会标记牛仔裤"-复选框，但不是上面的.这些值将从数据库中得到正确(即使上面的分支也会有 chk = true，但我仍然很好奇如果一个项目被标记，如何触发初始的冒泡并将所有父项标记为已检查"为真实".

This does of course mark the "Jeans"-checkbox, but not the above. These values would come correct from the database (where even the above bransch would have chk = true, but none the less I am curious on how one could trigger the initial "bubble up and mark all the parents as checked" if an item is marked as "true".

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

Could someone help me out to understand how that could be done?

非常感谢！

克里斯托夫

推荐答案

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

I would preprocess the tree data in a recursive way similar to your setData function:

 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);

查看更新的小提琴 http://jsfiddle.net/65yucqge/

编辑这是另一个显示如何将复选框数据放入数组的小提琴:http://jsfiddle.net/tmakin/kmhw1ue0/

Edit Here is another fiddle showing how to get the checkbox data into an array: http://jsfiddle.net/tmakin/kmhw1ue0/

这篇关于树视图中的角度复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！