How to change text element into input field on click using AngularJS?

Question

I was wondering how this can be done in AngularJS.

Having this list of keywords and an edit button next to it.

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

Now in my controller I have something like this.

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

How can I replace the "strong" element with a text input field via the controller. Can this be done in angularJS?

Thanks for the help.

David H. · Accepted Answer · 2016-07-04 20:55:41Z

9

As charlie mentionned, ng-if would do the job. There is also 'ng-switch', which was made exactly for this type of situation.

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

And the controller would look like:

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

And you change $scope.mode[index] to anything else when you're done editing.

edited Jul 4, 2016 at 20:55

answered Jul 4, 2016 at 20:44

David H.

5072 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ryanm Over a year ago

As a note, you could add ng-blur="mode[$index]='view'" to the input element. This is a more minimalist option to return to the initial 'view' state, instead of the 'save' button in the accepted answer.

charlietfl · Accepted Answer · 2016-07-04 20:09:27Z

7

Simplest way would be do it directly in the template using 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>

answered Jul 4, 2016 at 20:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

3 Comments

TheGPWorx Over a year ago

That's a good work around. I thought Angular has a way to somehow automate that. But this works perfectly. Thanks.

charlietfl Over a year ago

There are modules that have far more features/style etc but I only showed you the simplest approach

TheGPWorx Over a year ago

Yes this will suffice. Thanks for the help.

begeleiding · Accepted Answer · 2024-03-04 11:24:59Z

0

charlietfl's suggestion:

Blockquote Simplest way would be do it directly in the template using ng-if

ng-if doesn't work ng-show does.

Source: ng-click not working with ng-if

edited Mar 4, 2024 at 11:24

answered Mar 4, 2024 at 11:23

begeleiding

113 bronze badges

Collectives™ on Stack Overflow

How to change text element into input field on click using AngularJS?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related