如何使用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可以完成這項工作。 也有專門針對這種情況的“ 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 [index]更改為其他任何內容。

Answer 2

最簡單的方法是使用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>