CODEWITHSUNDEEP
angularjs
kSeudo
kSeudo

Reputation: 619

Embedding model variables in textarea with Angualar.js

I am trying to embed some model variables in a textarea input so that client side changes in one field populate in another input. I have tried the following (and googled a bit) but I cant get it to work........

 <textarea ng-model="event.message" required ngMaxlength="{255}" ngMinlength="{10}" ng-init="event.message='Hi, {{event.name}} today at {{event.time}}. Reply with in to join or out if you cant make it. Thanks.'" class="form-control">
                    Hi, {{event.name}} today at {{event.time}}. Reply with in to join or out if you cant make it. Thanks.
                </textarea>

In this example event.name is bound to another input but it does not show in the text area when changed.

Is there a way to get this to work?

Many thanks

Upvotes: 0

Views: 86

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

Here is a working plunker.

I think the main issue you were facing was within the ng-init:

ng-init="event.message='Hi, {{event.name}} today at {{event.time}}. Reply with in to join or out if you cant make it. Thanks.'"

Inside the ng-init you don't need to interpolate {{ }} because it is already running in a JavaScript context.

So you can change it to this:

ng-init="event.message='Hi, ' + event.name + ' today at ' + event.time + '. Reply with in to join or out if you cant make it. Thanks.'"

Also, if you are using ng-init there is no reason to also have content inside the <textarea>, it will only get replaced wholesale anyway.

Upvotes: 2

Related Questions