0

我有一个相当大的待办事项列表，我想为其添加就地编辑：

  [ ] first todo
  [ ] second todo
  [ ] third todo

单击第二个待办事项后，可以编辑第二个待办事项的文本，但您也可以在待办事项上设置一些属性：

  [ ] first todo
 -----------------------------------------------------------
| [ ] second todo__________________                         |
|     due: __/__/____                                       |
|     assigned: ______________                              |
|                                                           |
|     [save] [cancel]                                       |
 -----------------------------------------------------------
  [ ] third todo

现在我可以做类似的事情：

<div ng-repeat="todo in todos">
  <div ng-show="!doedit">
    <input type="checkbox"> <a href="" ng-click="doedit = true">{{todo.title}}</a>
  </div>
  <div ng-show="doedit" class="boxed">
    <input type="checkbox"><input type="text" ng-model="todo.title"><br>
    <input type="date" ng-model="todo.due"><br>
    <input type="text" ng-model="todo.assigned"><br>
    <button ng-click="doedit = false">save</button>
  </div>
</div>

这应该可以工作（忽略取消按钮的工作方式），但是如果我有一个大的待办事项列表（100 多个项目），它将创建大量可能从未使用但仍绑定到变量的隐藏元素。

有一个更好的方法吗？我查看了angular-xeditable，它似乎可以动态添加元素，但它仅适用于简单的输入元素。

还是有大量隐藏元素不是角度问题？

4

3 回答 3

2

ng-if如果评估结果为 false，则从 DOM 中完全删除该元素，包括任何观察者。例如：

<div ng-if="doEdit"></div>

这篇文章解释了 ng-if 和 ng-show 之间的一些区别。

于 2016-03-03T12:40:22.350 回答
1

拥有大量隐藏元素不仅是 js 的问题，也是 DOM 本身的问题。你不应该那样做。
可以做的是

1. 使用 ng-if -isEdited在用户单击待办事项后保持所有元素的状态。设置变量/状态isEdited = !isEdited。如果还没有，这会将其设置为 true。然后在你的 DOM 中使用 ng-if 编写 HTML。像这样的东西

<div class="to-do-item"></div><br>
<div ng-if="isEdited">
<!--UI for the edited part-->
</div>

由于 ng-if 在条件为真之前不会渲染 html。DOM 上不会有太多负载。

2. 如果所有待办事项的待办事项编辑模板都相同。您应该更喜欢使用ng-includewith ng-if。这样，当您第一次尝试编辑元素时，模板就会被下载。然后你可以缓存它，以免网络延迟。也没有额外的隐藏html。页面上需要的任何内容都在页面上，并且不会被隐藏。

于 2016-03-03T12:42:13.173 回答
0

将所有编辑部分包装到一个容器中，ng-if当它不活动时，整个部分的内部监视数量会减少到一个

于 2016-03-03T12:38:36.147 回答