将p标签更改为输入

我正在使用AngularJS构建小型SPA。从jQuery背景来看，我在AngularJS中遇到了诸如DOM操作（或缺乏）等问题。我有一个创建tr的ng-repeat，我想要发生的是当最终用户点击td中的一个p标签时，它会转换为可编辑的输入字段。将p标签更改为输入

来源：
ng-repeat initial

在p标签点击：
ng-repeat with edit

下面是我目前拥有的代码：
的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' }

我想我需要使用一个指令，所以如果有人能指向我在正确的方向或让我知道我能做什么，那将不胜感激。

谢谢你的帮助。

来源

2014-09-30 AndresL

也许一个使用角度帮助进行内联编辑的例子。见http://jsfiddle.net/bonamico/cahz7/ – 6ton 2014-09-30 14:57:00

http://plnkr.co/edit/ki3diA6WIf9ZU99FH42a?p=preview – dfsq 2014-09-30 15:02:57

看起来像指令是正确的路要走。我从你的小提琴中假设，我可以用ng-repeat创建td中的div，是否可以安全地假设？ – AndresL 2014-09-30 15:04:44

相当简单，你可以使用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旗回过 - 但除此之外，这应该工作。

来源

2014-09-30 14:57:21 tymeJV

它不会与通用的'isEditing'标志一起工作，因为它会切换所有测试的编辑。 – dfsq 2014-09-30 15:02:17

@dfsq - 没有常见的'isEditing'标志 - 它在'ng-repeat'内。 – tymeJV 2014-09-30 15:07:26

因此，这有输入存在于html中，但隐藏输入与匹配ng模型作为p标记，直到isEditing标志设置为false？ – AndresL 2014-09-30 15:07:34

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

简而言之，您可以事先创建输入字段，但它始于一个隐藏它的类（display：none）。当你点击p标签时，你在$作用域中设置一个布尔值，称为'showField1'为true，ng-class将输入域的类改为带有display：block的类。

你做同样的你的p标签，这与显示器开始了：块，但是当你点击它，NG-类可以在类切换到另外一台带显示：隐藏

简单。你不需要指令。

来源

2014-09-30 15:05:08 mwarren

将p标签更改为输入

回答

相关问题