Javascript 如何在保持内容为AngularJS的同时操作DOM类型？

我想显示一个列表，让用户编辑它们

该列表是使用ng repeat生成的。首先，当它被显示时，它应该是纯文本的形式。但是当用户按下相应的编辑按钮时，应该将其更改为输入文本字段，内容不变。当用户提交表单时，数据将被保存，输入内容应更改回纯文本

---

这与有棱角的思维方式相容吗？如果是的话，我如何认识到这一点？如果没有，用AngularJS实现这个想法的正确方法是什么？

类似的方法可能会奏效：

<ul>
    <li ng-repeat='item in items'>
        <span ng-hide='item.editing'>item.value</span>
        <input type='text' ng-show='item.editing' ng-model='item.value' />
        <button ng-click='item.editing = !item.editing'>Edit</button>
    </li>
</ul>

---

然后在提交操作集item.editing=false中，对于items中的每个项目，类似的操作可能会起作用：

<ul>
    <li ng-repeat='item in items'>
        <span ng-hide='item.editing'>item.value</span>
        <input type='text' ng-show='item.editing' ng-model='item.value' />
        <button ng-click='item.editing = !item.editing'>Edit</button>
    </li>
</ul>

---

然后，在提交操作集item.editing=false中，对于items中的每个项，我更喜欢使用angular js的另一种方式或方法是跟踪范围中的当前项，如果正在编辑的字段数量较大，则效果会更好

$scope.currentitem;

将当前项目设置为正在编辑的项目

<button ng-click='currentitem = item'>Edit</button>

现在你可以像这样填写一张表格

<input type='text'  ng-model='currentitem.value' />

---

我更喜欢angular js的另一种方法是跟踪作用域上的当前项，如果编辑的字段数量很大，则效果会更好

$scope.currentitem;

将当前项目设置为正在编辑的项目

<button ng-click='currentitem = item'>Edit</button>

现在你可以像这样填写一张表格

<input type='text'  ng-model='currentitem.value' />