Paul Paul - 1 year ago 96
Javascript Question

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

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">
<strong id="">{{ }}</strong>
<button ng-click="editKeyword(">Edit</button>
<button ng-click="deleteKeyword(">Delete</button>

Now in my controller I have something like this.

$scope.editKeyword = function(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.

Answer Source

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

     <strong id="" ng-if="!editMode">{{ }}</strong>
     <span ng-if="editMode">
        <input ng-model="">
        <button ng-click="save(keyword); editMode = false">Save</button>
    <button ng-click="editKeyword(keyword); editMode = true">Edit</button>
    <button ng-click="deleteKeyword(keyword)">Delete</button>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download