将p标签更改为输入

Question

我使用AngularJS构建一个小型SPA。来自jQuery背景我在AngularJS中遇到DOM操作（或缺少操作）等问题。我有一个ng-repeat创建了一个 - 我想要发生的事情，就是当最终用户点击td中的一个p标签时，它会转换为可编辑的输入字段。< / p>

自：

在p标签上点击：

这是我目前拥有的代码：
index.html的
<tr ng-repeat="test in tests"> <td> <span ng-click='edit()'>{{test.name}}</span> </td> </tr>

controllers.js
$scope.edit = function() { something in here that will help me convert to input type='text' }

我认为我需要使用指令，所以如果有人能指出我正确的方向或让我知道我能做什么，那将非常感激。

感谢您的帮助。

Answer 1

相当简单，您可以使用ng-hide和ng-show以及isEditing标记：

<tr ng-repeat="test in tests">
    <td>
        <span ng-show="!isEditing" ng-click='isEditing = !isEditing'>{{test.name}}</span>
        <input type="text" ng-show="isEditing" ng-model="test.name" />
    </td>
</tr>

您需要添加一个按钮来保存编辑内容并将isEditing标志重新翻转 - 但除此之外，这应该可以正常工作。

Answer 2

角度方式是使用ng-class，它可以根据$ scope中的布尔对象来决定dom对象的类。

简单地说，您事先创建了输入字段，但它从一个隐藏它的类开始（显示：无）。 单击p标签时，在$ scope中设置一个布尔值，例如'showField1'为true，ng-class将输入字段的类更改为带有display：block的类。

你的p标签也是如此，它以display：block开头，但当你点击它时，ng-class可以通过display将类切换到另一个：hide

简单。你不需要指令。