Reset a textarea after input

Question

I am using AngularJS for a simple SPA.

This application includes a <textarea> which shows, by default a value from a binding:

<textarea>{{activeField.rawContent}}</textarea>

One should be able to edit content in this textarea, then save it to a database.

My problem is, as soon as an input was made, the textarea will save this input and afterwards no more show the content of the binding, even when activeField.rawContent is updated.

How could i prevent this behaviour?

@KhanhTO It seem's to work... would you mind to explain this to me? Thank you very, very much so far. — user2422960, Jul 31 '13 at 13:06
Your example is simply inserting a variable at the `textarea`, you have to BIND the data with `ng-model`. If this isn't there, how does it know to update when a change is made — tymeJV, Jul 31 '13 at 13:18

score 2 · Accepted Answer · edited May 23 '17 at 12:11

The {{}} is actually ng-Bind behind the scenes which is one-way data binding.

ng-model is two-way data binding.

In your code, what you actually do is inserting text content, not bind the data. It's recommended in angular documentation to use ng-model in this case. Try changing it to:

<textarea ng-model="activeField.rawContent"></textarea>

For more information, check this thread, ng-model, ng-bind

score 1 · Answer 2 · answered Jul 31 '13 at 13:10

When binding editable data to input/textarea fields you need to use the ng-model directive. This hooks into the elements change events and propagates the changes back to the model.

In this case you would implement this with:

<textarea ng-model="activeField.rawContent"></textarea>

Reset a textarea after input

2 Answers2