如何在列表中添加编辑选项

时间:2015-02-06 13:08:58

标签: javascript jquery angularjs angularjs-directive

我刚开始使用angularjs。我正在尝试构建简单的单页应用程序。我有用户将项目添加到列表中。我使用ng-repeat这样显示列表..

<div ng-repeat="option in options"></div><div id="editor"><input type="text" /></div>

我有一个编辑器div来添加列表底部的选项。

<div id="item1">item1<a href="#" ng-click="edit_item(item1)">edit</a></div>
<div id="item2">item2<a href="#" ng-click="edit_item(item2)">edit</a></div>
...
<div id="editor"><input type="text" /> ....<div>

但是当我编辑时,我想在我正在编辑的div之后移动editor div。我尝试使用jquery insertAfter方法。它有效。

<div id="item1">item1<a href="#" ng-click="edit_item(item1)">edit</a></div>
<div id="editor"><input type="text" /> ....<div>
<div id="item2">item2<a href="#" ng-click="edit_item(item2)">edit</a></div>
...

但是当我添加一个新项目时,它不会移动editor div它会按预期工作。有没有更好的方法来使用angularjs指令完成此任务。我以为我可以创建一个类指令并将编辑器移动到模板中并在点击时加载它。它会起作用吗?我感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

您可以将div <div id="editor"><input type="text" /></div>放入转发器。

<div id="item1">item1<a href="#" ng-click="edit_item(item1)">edit</a></div>
<div id="editor1" ng-show='...'><input type="text" /> ....<div>
<div id="item2">item2<a href="#" ng-click="edit_item(item2)">edit</a></div>
<div id="editor2" ng-show='...'><input type="text" /> ....<div>