CODEWITHSUNDEEP
javascriptangularjsdom
Colliot
Colliot

Reputation: 1551

How to manipulate the type of DOM while keeping the content in AngularJS?

I want to display a list of things and let users edit them.

The list is generated using ng-repeat. At first when it was displayed, it should be in the form of pure texts. But when the user pushed the corresponding edit button, it should be changed into an input textfield, with the contents unchanged. When the user submits the form, the data is saved and the input should be changed back to pure texts.

Is this compatible with the Angular way of thinking? If so, how do I realize it? If not, what is the correct way to realize the idea in AngularJS?

Upvotes: 1

Views: 42

Answers (2)

A.B
A.B

Reputation: 20445

other way or way that i prefer with angular js is to keep a track of current item on scope, this works better if you the fields being edited are in large number

$scope.currentitem;

setting current item equal to the item tha's being edited

<button ng-click='currentitem = item'>Edit</button>

Now you can have an form filled in like

<input type='text'  ng-model='currentitem.value' />

Upvotes: 1

Nicholas Thomson
Nicholas Thomson

Reputation: 548

Something like this would probably work:

<ul>
    <li ng-repeat='item in items'>
        <span ng-hide='item.editing'>item.value</span>
        <input type='text' ng-show='item.editing' ng-model='item.value' />
        <button ng-click='item.editing = !item.editing'>Edit</button>
    </li>
</ul>

Then in your submit action set item.editing = false for every item in items

Upvotes: 3

Related Questions