如何使用AngularJS將文本元素更改爲輸入字段？

Question

我想知道如何在AngularJS中完成這項工作。

擁有此關鍵字列表及其旁邊的編輯按鈕。

<tr ng-repeat="keyword in keywords"> 
     <td> 
      <strong id="keyword.name">{{ keyword.name }}</strong> 
     </td> 
     <td> 
      <button ng-click="editKeyword(keyword.name)">Edit</button> 
      <button ng-click="deleteKeyword(keyword.name)">Delete</button> 
     </td> 
    </tr> 

現在在我的控制器中，我有這樣的東西。

$scope.editKeyword = function(name){ 
    console.log(name); 
    //something done to change the <strong> element into a text input 
}; 

如何通過控制器用文本輸入字段替換「strong」元素。這可以在angularJS中完成嗎？

感謝您的幫助。

Answer 1

簡單的方法是直接在模板中使用ng-if

<td> 
    <strong id="keyword.name" ng-if="!editMode">{{ keyword.name }}</strong> 
    <span ng-if="editMode"> 
     <input ng-model="keyword.name"> 
     <button ng-click="save(keyword); editMode = false">Save</button> 
    <span> 
</td> 
<td> 
    <button ng-click="editKeyword(keyword); editMode = true">Edit</button> 
    <button ng-click="deleteKeyword(keyword)">Delete</button> 
</td> 

Answer 2

查理mentionned，ng-if會做的工作去做。 還有'ng-switch'，它正是爲這種情況而設計的。

<tr ng-repeat="keyword in keywords"> 
    <td ng-switch="mode[$index]"> 
     <input ng-switch-when="edit" id="edit" ng-model="keyword.name"> 
     <strong ng-switch-default id="keyword.name">{{ keyword.name }}</strong> 
    </td> 
    <td> 
     <button ng-click="editKeyword(keyword.name, $index)">Edit</button> 
     <button ng-click="deleteKeyword(keyword.name)">Delete</button> 
    </td> 
</tr> 

而且控制器看起來像：

$scope.editKeyword = function(name, index){ 
    $scope.mode[index] = "edit"; 
    console.log(name); 
    //something done to change the <strong> element into a text input 
}; 

並更改$ scope.mode [指數]其他任何事情，當你完成編輯。