如何在保留 AngularJS 中的内容的同时操作 DOM 的类型？

Question

我想显示一个事物列表并让用户编辑它们。

列表是使用 ng-repeat 生成的。一开始展示的时候，应该是纯文本的形式。但是当用户按下相应的编辑按钮时，它应该变成一个输入文本字段，内容不变。当用户提交表单时，数据被保存，输入应该改回纯文本。

这符合Angular的思维方式吗？如果是这样，我如何实现它？如果不是，在AngularJS中实现这个想法的正确方法是什么？

Answer 1

像这样的东西可能会起作用：

<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>

然后在您的提交操作中为 items

中的每个项目设置 item.editing = false

Answer 2

我更喜欢 angular js 的其他方式或方式是在范围内跟踪当前项目，如果您正在编辑的字段数量很多，这会更好

$scope.currentitem;

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

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

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

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

如何在保留 AngularJS 中的内容的同时操作 DOM 的类型？

How to manipulate the type of DOM while keeping the content in AngularJS?

javascript

dom

angularjs