javascript - 将同级项插入 Angular-UI-tree

Question

我需要在 Angular-ui-tree ( https://github.com/angular-ui-tree/angular-ui-tree ) 中单击时将同级项目插入到树中

这意味着我有:

<item><input value"item A #1"><button>insert under</button></item>
<item><input value"item B #2"><button>insert under</button></item>
<item><input value"item C #3"><button>insert under</button></item>
<item><input value"item D #4"><button>insert under</button></item>

当我单击项目 C“插入到”下时，我需要在项目 B 和项目 C 之间添加新项目 - 并聚焦此新项目的输入。

如何做到这一点？

非常感谢!

Answer 1

您没有提供数据和 html 的精确样本，这让事情变得更加复杂，所以我只制作了通用解决方案，但应该对您有帮助。

1)如何制作“添加到下面”按钮

ui-tree 只渲染你的树模型。因此，正如 Angular 中自然的那样，您唯一需要做的就是按照您想要的方式更改数据 - 在其他节点下添加节点。

所以你只需要获取兄弟节点数组和当前索引。索引在 $index 中可用，因为 ui-tree 使用标准 ngRepeat。更棘手的是获取 sibling 数组。快速查看文档显示 $parentNodesScope 是树节点的范围(即同级容器)，并且该范围包含 $modelValue ，猜测是同级数组。所以这完成了工作:

<button ng-click='$parentNodesScope.$modelValue.splice($index+1,0,{value:"New",nodes:[]})'>Add below</button>

请注意，{value:"New",nodes:[]} 是将要添加的内容，将其更改为您拥有的数据结构。

2)如何让添加的节点的输入聚焦

有很多关于如何在 agular 中集中输入的信息，例如这里 How to set focus on input field?

我喜欢这个https://stackoverflow.com/a/20865048回答最多并且有效。当所有元素插入 DOM 时，它基本上会聚焦所有元素 - 当 ui-tree 使用新节点重新渲染树时也是如此。缺点是在第一页加载后，最后一个节点将获得焦点，但现在由您来处理它。

您可以在这里找到整个演示:http://plnkr.co/edit/NWGvJY4YHaDlCG26W7Fd?p=preview