1

我需要在 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 之间添加新项目 - 并关注这个新项目的输入。

怎么做？

十分感谢！

4

2 回答 2

1

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

1）如何制作“添加下方”按钮

ui-tree 只渲染你的树模型。因此，在角度上很自然，您只需要做的就是以您想要的方式更改数据 - 在其他节点下添加节点。

所以你只需要获取兄弟节点数组和当前索引。$index由于 ui-tree 使用了标准，因此可以使用索引ngRepeat。更棘手的是获得兄弟姐妹的数组。快速查看文档揭示$parentNodesScope的是树节点的范围（即兄弟容器），然后这个范围包含$modelValue哪个是，猜测，兄弟数组。所以这可以完成工作：

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

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

2）如何使添加节点的输入成为焦点

有很多关于如何在 agular 中聚焦输入的信息，例如这里 如何在输入字段上设置焦点？

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

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

于 2015-02-17T21:51:36.367 回答
0

试试这个。首先，我在 HTML 按钮中添加了 onclick 事件侦听器：

<item><input value="item A #1"><button onclick="onClickItem(this);">insert under</button></item>
<item><input value="item B #2"><button onclick="onClickItem(this);">insert under</button></item>
<item><input value="item C #3"><button onclick="onClickItem(this);">insert under</button></item>
<item><input value="item D #4"><button onclick="onClickItem(this);">insert under</button></item>

然后是 JavaScript：

<script>
function onClickItem( clickedItem)
{
    var newElement = document.createElement( "item");
    newElement.innerHTML = '<input><button>insert under</button>';

    if( newElement.addEventListener)
        newElement.lastChild.addEventListener( "click", function() { onClickItem( newElement) });
    else if( newElement.attachEvent)
        newElement.lastChild.attachEvent( "onclick", function() { onClickItem( newElement) });  // for IE8 or earlier

    var parentNode = clickedItem.parentNode.parentNode;
    newElement = parentNode.insertBefore( newElement, clickedItem.parentNode.nextElementSibling );
}
</script>

JavaScript 的前两行只是创建新项目（我假设您希望新项目中的元素与原始项目中的元素相同，但如果您需要其他内容，则可以更改）。

然后它添加与原始按钮相同的事件侦听器 - 这意味着新项目的行为与原始按钮相同，因此单击新项目会创建另一个项目。

最后，它使用 JavaScript insertBefore DOM 方法将新项目插入到树中，引用 nextElementSibling 以确保它被插入到单击的项目之后，而不是之前。我希望这能给你你想要的。

于 2015-02-18T00:15:17.947 回答