將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標籤更改爲輸入

回答

相關問題