Guide on transforming a text element into an input field when clicked using AngularJS

Question

Guide on transforming a text element into an input field when clicked using AngularJS

I'm curious about how to achieve this functionality using AngularJS.

Specifically, I'd like to display a list of keywords with an edit button next to each one.

    <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>

In my controller, I currently have the following setup.

$scope.editKeyword = function(name){
    console.log(name);
    //placeholder for code that will convert the <strong> element into a text input
};

Is it possible to replace the "strong" element with a text input field through the controller in AngularJS?

Appreciate any guidance on this.

javascript angularjs

Answer 1

Answer №1

Charlie pointed out that using ng-if can achieve the desired outcome. Another option is 'ng-switch', specifically designed for this scenario.

<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>

The corresponding controller function would be:

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

Remember to update $scope.mode[index] once editing is complete.

Answer 2

Charlie pointed out that using ng-if can achieve the desired outcome. Another option is 'ng-switch', specifically designed for this scenario.

<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>

The corresponding controller function would be:

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

Remember to update $scope.mode[index] once editing is complete.

Answer 3

Answer №2

To easily accomplish this, you can directly implement it in the template using the ng-if directive.

<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 4

To easily accomplish this, you can directly implement it in the template using the ng-if directive.

<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 5

Answer №3

charlietfl's recommendation:

To simplify things, you can directly implement it in the template using ng-if

ng-show is the correct solution instead of ng-if.

Reference: ng-click not working with ng-if

Answer 6

charlietfl's recommendation:

To simplify things, you can directly implement it in the template using ng-if

ng-show is the correct solution instead of ng-if.

Reference: ng-click not working with ng-if

Guide on transforming a text element into an input field when clicked using AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

The Heroku Node.js application encountered an issue when trying to apply the style due to an incompatible MIME

Guide to incorporating Ember into an existing HTML file

Is there a way to trigger a confirmation function for form submission exclusively when clicking one specific submit button, and not the other?

Leveraging JavaScript and PHP for fetching image files and generating a downloadable zip folder

Issues with the execution of Typescript decorator method

Showcase Pictures from a Document

Save modified content in CKEditor to an HTML document

How is it possible to receive a TRUE value when the API returns an error message indicating that the requested photo does not exist?

Execute --runTestsByPath on two or more distinct paths

Issue with Ionic displaying data from AngularJS $http.get request

Is there a way to initiate LiveServer or npm run dev/start over my local network?

"Exploring the various configurations for session handling in NodeJs

Issue with Angular controller failing to load when link is clicked

Error Message: Expecting an Object - Microsoft JScript Runtime Error in Node.js

One controller, divergent template, introducing a fresh variable

Update the AngularJS (1.5) application to Angular 5

Dim the brightness of an image on Internet Explorer

Issues with MySQL not functioning properly when using Promise.All in a Node.js environment

Locate and dismiss a toast message (Toastr)

Sending a concealed input according to the chosen option