将兄弟项插入 Angular-UI-树

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

怎么做？

非常感谢！

Answer 1

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

1) 如何制作 "add below" 按钮

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

所以你只需要获取兄弟节点数组和当前索引。索引在 $index 中可用，因为 ui-tree 使用标准 ngRepeat。更棘手的是获取兄弟姐妹的数组。 Quick 查看文档显示 $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?

我最喜欢这个答案并且很有效。当它们被插入到 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-树

Insert sibling item to Angular-UI-tree

javascript

tree

angularjs

angular-ui-tree