如何在保持AngularJS中的内容的同时操纵DOM的类型？(How to manipulate the type of DOM while keeping the content in Angula

如何在保持AngularJS中的内容的同时操纵DOM的类型？(How to manipulate the type of DOM while keeping the content in AngularJS?)

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

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

这与Angular的思维方式兼容吗？ 如果是这样，我该如何实现呢？ 如果没有，在AngularJS中实现这个想法的正确方法是什么？

I want to display a list of things and let users edit them.

The list is generated using ng-repeat. At first when it was displayed, it should be in the form of pure texts. But when the user pushed the corresponding edit button, it should be changed into an input textfield, with the contents unchanged. When the user submits the form, the data is saved and the input should be changed back to pure texts.

Is this compatible with the Angular way of thinking? If so, how do I realize it? If not, what is the correct way to realize the idea in 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中的每个项设置item.editing = false

Something like this would probably work:

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

Then in your submit action set item.editing = false for every item in items