避免使用angularjs进行就地编辑的大量隐藏元素

Avoiding a large amount of hidden elements for in place editing with angularjs

本文关键字：编辑 元素 隐藏 angularjs      更新时间：2023-09-26

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

  [ ] 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+ 项），它将创建大量可能从未使用但仍绑定到变量的隐藏元素。

有没有更好的方法可以做到这一点？我查看了角度可编辑，它似乎可以动态添加元素，但它仅适用于简单的输入元素。

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

ng-if如果

元素的计算结果为 false，则从 DOM 中完全删除该元素，包括任何观察者。例如：

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

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

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

1. 使用 ng-if - 在用户单击待办事项后，保持所有元素的状态，比如说isEdited。设置变量/状态isEdited = !isEdited。如果尚未设置为 true，则会将其设置为 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-include与 ng-if 一起使用。这样，将在您第一次尝试编辑元素时下载模板。然后，您可以缓存它，以免网络滞后。也没有额外的隐藏html。页面上需要的任何内容都在页面上，不会被隐藏。

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

相关文章：