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＆＃34时，插入＆＃34;我需要在项目B和项目C之间添加新项目 - 并关注这个新项目的输入。

怎么做？

非常感谢你！

Answer 1

由于没有提供您的数据和HTML的精确样本，您使自己变得更加复杂，所以我只提供了通用的解决方案，但应该帮助您。

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

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

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

<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

Answer 2

试试这个。首先，我在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以确保它在单击的项目之后插入，而不是之前。我希望这会给你你想要的东西。

将兄弟项插入Angular-UI-tree

2 个答案: